修改 iframe.src 而不进入历史对象

2024-01-11

我的网页中有一个 iframe。我通过 javascript 修改 src 属性,如下所示:

document.getElementById('myiframe').src = 'http://vimeo.com/videoid1';
document.getElementById('myiframe').src = 'http://vimeo.com/videoid2';
document.getElementById('myiframe').src = 'http://vimeo.com/videoid3';

但是,每次我这样做时,它都会记录到浏览器的历史记录中。因此,每次我在浏览器窗口中按回键时,iframe 内容都会从 videoid3 转到 videoid2 再到 videoid1。如果我再次按返回,整个页面都会返回。

我想使用 javascript 修改 iframe src,而不将条目记录到浏览器的历史记录中。因此,如果我单击浏览器后退按钮,整个页面将返回而不更新 iframe。

我尝试做类似的事情:

document.getElementById('myiframe').contentWindow.location.replace('http://vimeo.com/videoid1');
document.getElementById('myiframe').contentWindow.location.replace('http://vimeo.com/videoid2');
document.getElementById('myiframe').contentWindow.location.replace('http://vimeo.com/videoid3');

虽然这使得浏览器后退按钮的行为符合我想要的方式,但它破坏了 vimeo 视频中的某些内容。 Vimeo 要求您通过 iframe.src 而不是 contentWindow.location.replace() 更改网址。

因此,如何在不登录历史记录的情况下修改 iframe.src ?

Related这实际上是我正在探索解决主要问题的解决方案之一,我将其发布在这里带有 iframe 的历史对象后退按钮 https://stackoverflow.com/questions/14722089/history-object-back-button-with-iframes


不改变src,只用新的iframe替换旧的iframe吗?

const urls = [
  "http://bing.com",
  "http://google.com",
  "http://duckduckgo.com"
];

function next() {
  if(urls.length==0) return;
  const original = document.getElementsByTagName("iframe")[0];
  const newFrame = document.createElement("iframe");
  newFrame.src = urls.pop();
  original.parentNode.replaceChild(newFrame, original);
}

nextbtn.addEventListener("click", () => next());
iframe {
  width: 300px;
  height:300px;
}
<p>let's test some iframes</p>
<button id="nextbtn">next</button>
  <iframe />

历史上没有记载。相同的功能。每个人都赢了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

修改 iframe.src 而不进入历史对象 的相关文章

  • YouTube 360​​ 视频 iframe 无法在移动浏览器中工作

    我正在尝试为 YouTube 360 视频获取嵌入的 iframe 以便在我的移动网站上播放 它在桌面浏览器上运行良好 但在移动浏览器中我只能播放平面立体视图 我可以确认它绝对是一个 HTML5 播放器 这显然是其他人正在经历的一个未解决的
  • 为什么选择 & 符号作为 C++ 中的引用符号? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 有谁知道为什么在 C 中选择 符号作为表示引用的方式吗 AFAIK 虽然我附近没有这本书 Stroustroup 没有解释这个选择 我觉得这有点
  • Chrome 和 Firefox 不会在 iframe 中显示大多数 PDF 文档

    我运行的是 Windows 7 64 位 我最近更新了操作系统以安装最新更新 从那时起 大多数 PDF 文档已停止在我的程序中呈现 我的程序想要在单独的 iFrame 中显示 PDF 文档 我通过获取 PDF 文档的 URL 并设置来做到这
  • 设置动态创建的 iframe 的基本标签

    我正在尝试动态创建 iframe 并在创建之前设置它的基本标记 ifrm document createElement IFRAME ifrm setAttribute src test html ifrm style width 400
  • Chrome 扩展 - 访问 iframe 元素

    我正在附加一个iframe到页面使用content script with src set to chrome extension getURL myPage 稍后在某些事件中 我想从框架中检索一些元素 我尝试了以下代码content sc
  • 如何从 WinJS iframe Windows 8 应用程序形成 POST 到 Paypal?

    我有一个使用 Javascript HTML 的 Windows 8 应用程序 在 iframe 中我有一个 Paypal 表单
  • 如何在iframe中插入html

    大家好 我需要在 iframe 中插入一个 html 字符串 如下所示 var html p body p jQuery popolaIframe click function parent indexIframe 0 documentEl
  • 如何在提交后删除本地 git 历史记录?

    我想从 Dropbox 切换到开源 Sparkleshare 它使用 git 进行同步和版本控制 如果说我在文件夹中删除了一个 1GB 文件 它会保留在本地 git 文件夹的历史记录中 但我希望将这种大量数据放在服务器上而不是客户端上 如何
  • 如何使用 svg 使 iframe“可聚焦”

    我想检测 iframe 上的点击 这建议 https stackoverflow com a 8101458 246719执行此操作的方法是捕获父窗口上的模糊事件 但是 当用户单击 iframe 内的 svg 时 它不会获得焦点 根窗口也不
  • actionBar后退按钮和android后退按钮的区别

    actionBar后退按钮和android后退按钮有什么区别 因为看起来 ActionBar 后退按钮是通过以下方式调用的 ActionBar actionBar getSupportActionBar actionBar setDispl
  • 此页面包含安全和不安全的项目以及 iframe

    IE 6 0 向我显示消息 此页面包含安全和非安全项目 因为我的页面上有 iframe 针对组合框错误 我尝试指向 src 中的一些不同的内容 但如果不放入空白的 html 页面 我似乎无法摆脱此消息 我想避免这种情况 因此没有服务器调用
  • 为什么 iframe 请求不发送 cookie?

    兄弟部门创建了一个 HTML 文件 该文件实际上是少数 iframe 的支架 每个 iframe 都会调用一个托管在 Web 服务器上的报告 其参数略有不同 调用的报告将向未经身份验证的用户显示登录表单 或向已经过身份验证的用户显示报告内容
  • 将 div 扩展到 iFrame 范围之外?

    是否可以将内容扩展到 iframe 之外 就我而言 我以前渲染的是原生
  • 通过嵌入式 Google Sheet 上的按钮激活脚本

    我正在尝试嵌入一个 Google 电子表格 其中包含一个我希望用户能够激活的脚本 我不希望他们能够编辑页面上的任何内容 我想我可以这样做 共享工作表并设置编辑权限 限制在我想要共享的一张纸上进行编辑 图像位于单元格上方 所以我认为这会阻止人
  • 通过单击链接更改 iframe src

    我有一个iframe看起来像这样 我想创建一个链接 以便当我单击它时 页面上的 iframe 会发生变化 我怎样才能使用 jQuery 做到这一点 和jquery有关系吗attr 你不需要 jQuery 您甚至不需要 JavaScript
  • 内容脚本和 web_accessible_resources iframe 之间的通信

    我有一个将 iframe 注入网页的内容脚本 内容 js var iframe document createElement iframe iframe id frame iframe style cssText position fixe
  • 如何将iframe内容复制到div?

    请参阅下面的代码片段 我希望 iframe 中的输出文本显示在 source div 中 我正在为此苦苦挣扎 并且很感激任何想法 如何将 iframe 中的输出文本复制到 div 中 如果 div sourcediv 包含 文本 则脚本在
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • Google 再营销标签 - iframe 高度问题

    我注意到 Google 的再营销代码会在我的页面底部插入一个 iframe 问题是 iframe 弄乱了我的布局 它的高度为 13 像素 并且在底部留下了空白的白色垂直空间 我尝试用 css 隐藏它 但它在 IE9 中仍然可见 iframe
  • 当 URL 包含片段时,iframe 会导致父元素在 Google Chrome 上向上滚动

    在 Google Chrome 37 0 2062 122 OSX Windows 上 具有包含片段的 URL 的 iframe 会导致父元素向上滚动 它只发生在 Chrome 中 在 Safari 和 Firefox 中测试 这是显示问题

随机推荐

  • NSXMLParser 泄漏

    我有以下泄漏的代码 Instruments 表示 泄漏的是 rssParser 对象 我 刷新 了 XML 提要 它运行了该块 然后泄漏了 file h interface TestAppDelegate NSObject
  • 使用 pandas 从宽到长的数据集

    有很多类似标题的问题 但我无法解决我的数据集遇到的问题 Dataset ID Country Type Region Gender IA01 Raw IA01 Class1 IA01 Class2 IA02 Raw IA02 Class1
  • 如何在 Flutter 中获取图像的 RGB 值?

    我正在为我的对象检测服务器创建一个移动客户端 我已经有一个完美工作的 python 客户端 它将图像作为输入 通过 HTTP 请求将其发送到服务器 并接收预测作为 json 响应 我正在尝试在 Dart 中实现同样的目标 而我对 Dart
  • BigQuery 最大分区数达到 2000 而不是 2500

    根据BigQuery 文档 https cloud google com bigquery quotas partitioned tables 分区表可以有2500个分区 每个分区表的最大分区数 2 500 Yet bq query des
  • golang插件如何验证包的版本?

    我正在尝试使用 golang 插件 但在调用时总是出现运行时错误plugin Open plugin Open plugin was built with a different version of package 我确信该插件是使用相同
  • 在 Rust 中的多个函数调用中保持变量处于活动状态

    我正在尝试在 Rust 中记忆递归 collat z 序列函数 但是我需要记忆值的哈希图来在单独的函数调用中保留其内容 有没有一种优雅的方法可以在 Rust 中做到这一点 或者我是否必须在 main 中声明 hashmap 并每次将其传递给
  • 如何在 Kotlin 上绕过 NetworkOnMainThreadException

    嗨 我从 kotlin 开始 现在 Android Studio 3 0 支持它 但我不知道如何在另一个线程中执行简单的网络请求 在java中很容易 new Thread new Runnable Override public void
  • Numpy 安装工具链损坏:无法链接简单的 C 程序

    System Windows 10 Python 3 7 Numpy 1 15 1 VS 2017 我不认为这是重复的 因为以下拟议的决议已失败 对于自制软件 不适用 Numpy 安装运行时错误 工具链损坏 无法链接简单的 C 程序 htt
  • JavaScript setTimeOut 似乎没有像我预期的那样工作

    这是一个简单的 JavaScript 文件 我在 Chrome localhost 下运行 所发生的情况是 DIV 背景颜色没有设置为绿色 然后设置为红色 而是直接设置为红色 第一个 setTimeout 似乎被忽略了
  • iOS Safari/Chrome 不会向上滚动以在无线电输入上显示验证错误消息

    我正在为需要移动设备友好的客户设置一份调查问卷 当表单提交 验证并且问题未得到回答时 它会滚动到第一个无效字段 无论是文本输入还是无线电输入 这仅适用于桌面浏览器和 Android 在 iOS Safari Chrome 上 文本输入按应有
  • mat-menu 穿透“cdk 覆盖雾”

    This 堆栈闪电战 https stackblitz com edit angular txgxyt file styles css SB 显示了问题 CSS类 WHYYYYY显示了我面临的 两个 问题 为了使垫菜单在悬停时打开 我需要设
  • Linux 共享内存:shmget() 与 mmap()?

    In this https stackoverflow com questions 5656530 how to use shared memory with linux in c建议OP使用线程mmap 代替shmget 在 Linux
  • DynamoDB 1 个大表还是多个小表?

    我目前面临一些有关数据库设计的问题 目前我正在开发一个 API 它可以让用户执行以下操作 创建帐户 1 个用户拥有 1 个帐户 创建配置文件 1 个帐户拥有 1 n 个配置文件 让个人资料上传 2 种类型的项目 1 个个人资料拥有 0 n
  • 关于 c++11 中的 std::result_of

    据我所知 可能的实施std result of is template
  • 如何在 jquery 中使元素既可拖动又可调整大小?

    如何在 jquery 中使元素既可拖动又可调整大小 可拖动和可调整大小都支持链接模式 因此您可以在一行中简化代码 假设你有一个div 并且该div的id是你想要使其可拖动和可调整大小的标题 然后jquery将像这样工作 document r
  • MonoTouch:从 ALAssetsLibrary.AssetForUrl 中获取图像

    在 MonoTouch 中 我正在将相机中的图像放入相册中 ALAssetsLibrary library new ALAssetsLibrary library WriteImageToSavedPhotosAlbum photo CGI
  • 使用 ORM 时跟踪数据库字段的更改

    我想跟踪对特定表中每一列所做的更改 我考虑将更改存储在另一个包含以下列的表中 id field and data where field 字符串值 是目标表中已更改的列data是该字段的新值 在返回数据集时 我想到从目标表中检索原始数据 从
  • Laravel 阻止用户访问其他用户资源 **url

    我在 url 中传递特定资源 例如 https www example com https www example com 公司ID 在控制器中我可以通过以下方式访问资源 public function index companyID Co
  • 在flutter中刷新令牌

    我正在开发一个金融项目 Flutter 其中从后端获取身份验证令牌经常过期 我怎样才能保留token只要过期用户正在使用该应用程序 我建议您可以以简单的方式处理这些事情 例如在获取数据时 如果令牌过期 您会收到 401 未经授权的异常 您可
  • 修改 iframe.src 而不进入历史对象

    我的网页中有一个 iframe 我通过 javascript 修改 src 属性 如下所示 document getElementById myiframe src http vimeo com videoid1 document getE