开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Chrome75-设置iFrame src属性导致iFrame家长加载iFrame内容

Chrome75是Google Chrome浏览器的一个版本，它引入了一些新的功能和修复了一些bug。其中一个问题涉及设置iFrame的src属性导致iFrame的父级页面加载iFrame内容的问题。

该问题出现在Chrome75及更早版本中，当在JavaScript代码中设置iFrame元素的src属性时，iFrame的内容会立即加载，并替换掉iFrame元素所在页面的内容。这导致了页面闪烁，用户体验不佳。

解决这个问题的一种方法是使用iframe元素的srcdoc属性，而不是直接设置src属性。通过设置srcdoc属性，可以将HTML内容直接嵌入到iframe中，而不会触发整个页面的重新加载。

例如，以下代码演示了如何使用srcdoc属性加载iFrame内容：

<!DOCTYPE html>
<html>
<head>
  <title>父级页面</title>
</head>
<body>
  <iframe id="myFrame" width="500" height="300"></iframe>

  <script>
    var iframe = document.getElementById('myFrame');
    var htmlContent = '<html><body><h1>iFrame内容</h1><p>Hello, World!</p></body></html>';
    iframe.srcdoc = htmlContent;
  </script>
</body>
</html>

在上述代码中，通过将HTML内容存储在变量htmlContent中，并将其赋值给iframe的srcdoc属性，可以将指定的内容加载到iFrame中，而不会影响父级页面的内容。

需要注意的是，由于这是Chrome75之前的一个bug，不同浏览器版本可能会有不同的行为。因此，在开发中应该进行充分测试以确保在不同浏览器上的兼容性。

腾讯云提供了各种云计算和互联网相关的产品，可以用于构建和部署网站、应用程序和其他服务。具体与该问题相关的产品和链接地址可能会根据具体情况而变化，建议查阅腾讯云官方文档或联系腾讯云的技术支持获取更准确和最新的信息。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

iframe属性设置

src 链接到的地址URl frameborder 是否显示边框

3.1K1 0

03-iframe属性src的使用

src如果写成jsp页面，将会访问jsp页面，如果写成某个Action，会在访问该页面的时候自动的调用这个Action。... <body style="background:rgb(46, 110, 17) url(img/bg.png) repeat-x scroll 0% 0%"> <iframe src="indexrightmenu.jsp" width="1353" height="430" scrolling="no" frameborder="0"> <iframe src="indexAction_visitBottomMenus" width="

1.9K1 0

加载第三方JS的各种姿势

异步加载异步加载JS的方法很多，最常见的就是动态创建一个script标签，然后设置其src和async属性，再插入到页面中。这里有个DEMO。...第三方JS文件一般是不同域名的且JS内容不可控，所以此方法就不适用了 iframe中加载JS – 将你的JS文件直接放到另一个页面的HTML中，然后将此页面URL地址作为iframe标签src属性。...同时设置async标签，浏览器便会异步加载test.js文件，不会暂停掉浏览器的解析执行。流程图如下： ? 这里有一个DEMO。但它也并不完美，因为一些旧浏览器并不支持async属性。..._l();">'); doc.close(); })('test.js'); 上述代码分为两个部分：创建了一个隐藏的iframe标签，设置其src值为JS代码，然后插入到主页面中在iframe...第三方JS代码运行在iframe中，导致它无法获取到页面上的信息。

6.2K1 0

【前端编程】加载第三方JS的各种姿势

异步加载异步加载JS的方法很多，最常见的就是动态创建一个script标签，然后设置其src和async属性，再插入到页面中。这里有个DEMO。...第三方JS文件一般是不同域名的且JS内容不可控，所以此方法就不适用了 iframe中加载JS – 将你的JS文件直接放到另一个页面的HTML中，然后将此页面URL地址作为iframe标签src属性。...同时设置async标签，浏览器便会异步加载test.js文件，不会暂停掉浏览器的解析执行。流程图如下：这里有一个DEMO。但它也并不完美，因为一些旧浏览器并不支持async属性。..._l();">'); doc.close(); })('test.js'); 上述代码分为两个部分：创建了一个隐藏的iframe标签，设置其src值为JS代码，然后插入到主页面中在iframe...虽然它并非跨域可以获得window.parent，但是第三方代码并不能知道自己是否在iframe中，需要在加载第三方JS代码的时候通知它。具体的通知方法千变万化，而第三方JS的内容又不受我们控制。

4.2K9 0

Web 嵌入 | Electron 安全

默认值为150 5) importance 这是个实验性的属性，表示的 src 属性指定的资源的加载优先级。允许的值有： auto (default) 不指定优先级。...如果浏览器不支持 srcdoc 属性，则会渲染 src 属性表示的内容。...有了 src ，为何还要有一个 srcdoc ，甚至 srcdoc 中的内容可以直接被放到 iframe 中渲染，这多少有些奇怪，而且 srcdoc 属性还是一个相对新的属性，不是说历史遗留问题 srcdoc...src="https://www.github.com/"> 表示可见网址的 string 写入此属性将启动顶级跳转更改 src 的值将重新加载当前页面。...> 加载的页面内部的 iframe 等内容是否获取到 Preload 脚本暴露的内容 4) plugins <webview src="https://www.github.com/" plugins

5861 0

iframe内部DOM设置样式引发的思考

iframe内部的DOM中body元素有个min-width:1200px的属性设置，导致我设置iframe的宽高时，iframe总会出现滚动条。而我的目的就是要消除滚动条。...除了设置iframe内部DOM的样式还有别的方法吗？是否可以通过iframe的属性设置来达到目的？于是将iframe标签的相关属性都看了一看，最终通过设置iframe的属性解决问题。...importance表示src属性指定的资源的加载优先级。auto,high,low。 name用于定位嵌入的浏览上下文的名称。...no-referrer,same-origin,strict-origin... sandbox该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。...srcdoc该属性是一段HTML代码，这些代码会被渲染到 iframe 中。如果浏览器不支持 srcdoc 属性，则会渲染 src 属性表示的内容。

2K2 0

iframe 有什么好处，有什么坏处？

iframe 用于在页面内显示页面，使用会创建包含另外一个文档的内联框架（即行内框架）二、iframe 的常用属性 1、width...sandbox 就是用来给指定 iframe 设置一个沙盒模型限制 iframe 的更多权限 sandbox 是 h5 的一个新属性，IE10+支持启用方式就是使用 sandbox 属性： <iframe...在 sandbox 里面进行一些简单设置 <iframe sandbox=”allow-same-origin” src=”...”...这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要，这当然是很好的。...一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 SRC。 4、不利于 SEO 搜索引擎的检索程序无法解读 iframe。

4.1K1 0

深入理解iframe

iframe 用于在页面内显示页面，使用会创建包含另外一个文档的内联框架（即行内框架）二、iframe 的常用属性 1、width...sandbox 就是用来给指定 iframe 设置一个沙盒模型限制 iframe 的更多权限 sandbox 是 h5 的一个新属性，IE10+支持启用方式就是使用 sandbox 属性： <iframe...在 sandbox 里面进行一些简单设置 <iframe sandbox=”allow-same-origin” src=”...”...这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要，这当然是很好的。...一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 SRC。 4、不利于 SEO 搜索引擎的检索程序无法解读 iframe。

4.2K1 0

7个HTML属性助你提升用户体验

这种方式可能导致更长的首次绘制时间，但在图像完成解码后，用户将能够立即看到完整的图像，而不是渐进式的加载。 async：异步解码图像。这将在图像下载后的空闲时间进行解码，以避免页面加载或滚动的延迟。...它告诉浏览器何时开始加载 iframe 内容，可以有以下三个值： eager：默认值。立即加载 iframe。即使 iframe 不在当前屏幕视窗（viewport）内，也会立即开始加载。...下面是一个具体的例子：在这个例子中，iframe 会延迟加载，直到它进入或即将进入视窗。...同时，即使浏览器支持 "画中画"模式，也有可能因为用户的个人设置或其他因素导致 "画中画"模式不能被启用。...如果实际加载的脚本内容的 hash 值与 integrity 属性值不匹配，浏览器就不会执行这个脚本。

4803 0

前端面试题-每日练习(1)

它的基本用法如下：在这个例子中，src 属性用于指定要嵌入的页面的...本文由“壹伴编辑器”提供技术支持优点: 解决加载缓慢的第三方内容如图标和广告等的加载问题 Security sandbox 并行加载脚本 ---- 缺点： iframe会阻塞主页面的Onload事件...即使内容为空，加载也需要时间没有语意 4. href 与 src的区别 href (Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系...； 3、浏览器解析方式不同：当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。...在没有设置宽度的情况下，默认宽度总是其父元素的宽度。行内元素转换成块元素，只要设置其display属性为block即可，display:block; 。

1472 0

在 HTML 中包含资源的新思路

例如，我经常希望向页面添加额外的 HTML，或者嵌入 SVG 文件的内容，以便我们可以为其设置动画和样式。...这是因为代码用 iframe 加载文件，并且在删除 iframe之前，用 onload 事件在 HTML 中 iframe 的位置之前注入了 iframe 里的内容。...对于一个object，src 属性必须用 data 替代：可能存在的问题 iframe 在 web 上很常用，但是在页面中过度使用 iframe 可能会导致性能或内存消耗问题。

3.1K3 0

IT课程 HTML基础 014_多媒体和嵌入内容

" align="center" border="1"> 效果：设置替代文本替代文本（alt text）用来在图片无法加载的时候显示，也被屏幕阅读器用来读出图片的内容，帮助视力障碍者理解图片。...静音设置为 true，预加载设置为 auto。...音频文件的 URL 设置为 mp3.mp3，控制控件设置为 true，自动播放设置为 true，循环播放设置为 true，静音设置为 true，预加载设置为 auto。... 元素具有以下属性： src 属性定义要嵌入的网页或文档的 URL。 width 属性定义元素的宽度。 height 属性定义元素的高度。...framespacing 属性定义元素与其周围内容之间的间距。 marginwidth 属性定义元素的左和右边距。

791 0

前端技巧

解决img标签src为空或加载失败后的边框问题 img标签的src为空或者加载失败，浏览器都会自动加上一个边框，一定程度上影响美观。...针对路径为空以下是一种高效的方法： img[src=""],img:not([src]){opacity:0;} /*这样可以实现在路径为空时隐藏*/ 针对图片加载失败首先找到加载失败的原因... 通过form的action属性提交表单，并接收处理返回值的方法如下： //html: <iframe src="" frameborder="0" name...alert(responseText); // do something... }) 剖析一下：首先，写一个iframe，并且给 iframe 设置 display:none...所以指定target属性为iframe的name。这样的话返回值会存到iframe中。

7601 0

优秀博客文章 | javascript跨域方法总结

0x01 具备src的标签原理：所有具有src属性的HTML标签都是可以跨域的在浏览器中，、、和这几个标签是可以加载跨域（非同源）的资源的，并且加载的方式其实相当于一次普通的...在页面 http://a.example.com/a.html 设置document.domain 代码： <iframe id = "iframe" src="http://b.example.com...; alert(window.name); b.html中，当iframe加载后将iframe的src指向同域的c.html，这样就可以利用iframe.contentWindow.name...跨域解决了一些资源共享、信息交互的难题，但是有的跨域方式可能会带来安全问题，如jsonp可导致水坑攻击，等标签会被用来进行xss或csrf攻击。...我们尊重每一位原创作者，文章内容仅用于技术分享，如有侵权可联系编辑删除。我们不生产安全，我们只是安全的搬运工 --farmsec

5392 1

第三方Javascript开发系列之投放代码

-- End Google Analytics --> 其实做的事情很简单：创建一个script标签，设置其src值为GA的第三方Javascript地址。...-- body 内容 --> <script src="http://example.com/test.js?...同时现代浏览器提供了async属性，浏览器会异步的加载async的外链script标签，不会block掉页面（但不保证执行顺序）。这就同时享受到了预下载和异步加载两个福利，带来巨大的性能提升。...另外因为CDN不能使用，所以当动态服务器不稳定时，容易导致加载javascript脚本的时间特别长。虽然可以使用异步加载，但是浏览器在加载东西的时候左上角还是会出现loading。...缺点也很明显：就是能做的事情仅限于iframe内部。比较适合不需要访问页面就可以提供内容的需求。

9722 0

真正解决iframe高度自适应问题

1.前言解决iframe高度自适应问题有两种方法 1.pym 2.手动设置iframe的高度本文主要是总结第二种实现方式，因为第一种pym.js插件我没用懂如果使用iframe时，遇到以下的需求...： iframe的高度始终等于嵌入页面内容的高度，而不是屏幕的高度右侧不允许出现两个滚动条 iframe的高度自适应不仅仅是指刚加载进来时，也有可能嵌入内容的高度会随点击变化（如：下拉菜单，左侧导航栏等...）页面可能同时嵌入多个iframe 2.contentWindow对象 *需要起个服务，不要直接在本地打开这是个只读属性，返回指定的iframe的window对象拿到这个对象，就可以根据正常网页的方法拿到嵌入...-- <iframe id="iFrame1" class="flexiframe" src="....-- <iframe id="iFrame2" class="flexiframe" src=".

5.2K3 0

无界微前端是如何渲染子应用的？

(iframe, { // iframe 的 url 设置为主应用的域名 src: mainHostPath, style: "display: none",...停止 iframe 的加载 sandbox.iframeReady = stopIframeLoading(iframeWindow).then(() => { // 省略其他内容...创建 iframe 的 DOM，并设置属性 2. 将 iframe 插入到 document 中（此时 iframe 会立即访问 src） 3....停止 iframe 的加载（stopIframeLoading）为什么要停止 iframe 的加载？...的 src 要设置为主应用的域名为了实现应用间（iframe 间）通讯，无界子应用 iframe 的 url 会设置为主应用的域名（同域） • 主应用域名为 a.com • 子应用域名为 b.com

1.3K3 0

BUG赏金 | 当我发现iFrame注入时的利用

图片来源于网络 iFrame注入是一种非常常见的跨站脚本攻击。它包括已插入到网页或文章内容的一个或多个iframe代码，或一般下载一个可执行程序或进行其他动作使网站访客的电脑妥协。...) 多种利用方式如下： (IE) (IE) alert(0)eval(location.hash.slice(1))#alert(1) 接受用户提供的数据作为iframe源URL可能会导致在Visualforce页面中加载恶意内容...通过这种方式，如果攻击者向受害者提供设置为恶意网站的iframesrc参数，则该框架将与恶意网站的内容一起呈现。

1.2K1 0

客服弹窗中使用layer库自定义展示的标题 - 网站网页在线客服源码教程

content: 'http://www.your-site.com/html/window.html', success: function(layero, index){ // 弹窗加载成功时的回调...var iframe = layero.find('iframe'); // 获取到弹窗中的iframe元素 var btnReload = layero.find('#btn-reload...'); // 获取到按钮 btnReload.click(function(){ iframe.attr('src', iframe.attr('src')); // 重新加载iframe的内容...}); 在这个例子中，我在自定义标题里面增加了一个按钮，实现点击重新加载弹窗内容的效果我们使用了jQuery的click()方法来处理按钮的点击事件。...在按钮的回调函数中，我们使用了iframe的attr()方法来重新设置src属性，从而重新加载iframe的内容。

1.1K3 0

无界微前端是如何渲染子应用的？

(iframe, { // iframe 的 url 设置为主应用的域名 src: mainHostPath, style: "display: none",...(iframe); const iframeWindow = iframe.contentWindow; // 停止 iframe 的加载 sandbox.iframeReady = stopIframeLoading...return iframe;}创建 iframe 主要有以下流程：创建 iframe 的 DOM，并设置属性将 iframe 插入到 document 中（此时 iframe 会立即访问 src...）停止 iframe 的加载（stopIframeLoading）为什么要停止 iframe 的加载？...的 src 要设置为主应用的域名为了实现应用间（iframe 间）通讯，无界子应用 iframe 的 url 会设置为主应用的域名（同域）主应用域名为 a.com子应用域名为 b.com，但它对应的 iframe

5.2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭