iframe 重复加载js
基础概念
iframe 是 HTML 中的一个元素，用于在当前网页中嵌入另一个 HTML 文档。它可以用来加载外部网页、应用或其他内容。当在 iframe 中嵌入 JavaScript 文件时，如果处理不当，可能会导致这些脚本被重复加载。
优势
使用 iframe 加载 JavaScript 的主要优势包括：
- 隔离性：
iframe内容与主页面隔离，可以防止脚本冲突。 - 模块化：可以将复杂的应用拆分为多个独立的
iframe，便于管理和维护。 - 安全性：通过
sandbox属性可以限制iframe内容的权限，提高安全性。
类型
- 同源
iframe：与主页面同源（协议、域名、端口相同）。 - 跨域
iframe：与主页面不同源。
应用场景
- 嵌入第三方内容：如地图、视频播放器等。
- 微前端架构：将多个独立的应用组合在一个页面中。
- 沙箱环境：用于测试或运行不受信任的代码。
问题原因及解决方法
问题原因
iframe 中 JavaScript 文件重复加载通常是由于以下原因：
- 多次创建
iframe：每次创建新的iframe都会重新加载其中的资源。 - 缓存问题：浏览器缓存策略可能导致脚本被重复请求。
- 脚本加载逻辑错误：在
iframe的生命周期中多次执行了加载脚本的操作。
解决方法
- 避免重复创建
iframe： 确保在页面生命周期内只创建一次iframe，并在需要时重用它。 - 避免重复创建
iframe： 确保在页面生命周期内只创建一次iframe，并在需要时重用它。 - 使用缓存控制： 在服务器端设置适当的缓存头，确保浏览器正确缓存资源。
- 使用缓存控制： 在服务器端设置适当的缓存头，确保浏览器正确缓存资源。
- 优化脚本加载逻辑：
确保脚本只在
iframe加载时执行一次。 - 优化脚本加载逻辑：
确保脚本只在
iframe加载时执行一次。
示例代码
以下是一个完整的示例，展示了如何在 iframe 中加载 JavaScript 文件并避免重复加载：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe Example</title>
</head>
<body>
<iframe id="myIframe" src="about:blank"></iframe>
<script>
document.getElementById('myIframe').onload = function() {
if (!this.contentDocument.querySelector('#loadedMarker')) {
const script = this.contentDocument.createElement('script');
script.src = 'path/to/your/script.js';
this.contentDocument.body.appendChild(script);
const marker = this.contentDocument.createElement('div');
marker.id = 'loadedMarker';
this.contentDocument.body.appendChild(marker);
}
};
function loadIframeContent(url) {
const iframe = document.getElementById('myIframe');
iframe.src = url;
}
</script>
</body>
</html>通过上述方法，可以有效避免 iframe 中 JavaScript 文件的重复加载问题。
相关·内容
1回答
我在页面中有一个iFrame。当页面加载时，iFrame显示为一个黑框，直到它也被加载为止。这在视觉上是分散注意力的。如何防止在页面加载时显示黑盒？iFrame代码+ CSS：
浏览 5提问于2013-07-01得票数 0
回答已采纳
2回答
我在vex6.html中创建了一个iframe，在traces.gq/test.js中创建了一个js文件，在该文件中有链接和id，但是当我试图在html中调用代码时，它不起作用。title>Page Title</title><body>
<script type="text/javascript" src="https://styles.gq/test.js</em
浏览 6提问于2022-11-15得票数 0
回答已采纳
我看到我的页面上唯一加载的js是/wp-content/plugins/wp-featherlight/js/wpFeatherlight.pkgd.min.js?ver=1.3.0。目前，我需要将所有这些属性添加到每个链接：data-featherlight-iframe-frameborder="0"
data-featherlight
浏览 7提问于2018-12-11得票数 0
假设我们有以下HTML文件：<head> <input type="button" value="Download" id="btn" onclick="
浏览 0提问于2009-10-06得票数 13
回答已采纳
文本和标题重复OK使用附加子，但视频iframe只加载一次。下面是我想重复的节点的代码： <h2 class="centered"> <br><iframe id="iframe-test" width="auto" height="auto&
浏览 1提问于2017-03-09得票数 1
我的index.html里有一个iframe。内容通过菜单栏加载到其中：</iframe>/* menu要加载到iframe中的目标url有一个稍微减少的
浏览 4提问于2014-04-03得票数 0
回答已采纳
1回答
我有一个用例，在这个用例中，我希望加载一个具有动态生成的src的iframe。我可以使用res.redirect('https://example.org')加载这个URL。但我的问题是。加载此页面后，我无法执行res.send或res.render等操作，因为在将响应发送到客户端之后，node.js将不允许重定向。因此，我需要一种机制，可以在已经定义的iframe中动态加载这个URL。然后轻松地，我应该能够处理任何重定向。编辑:
浏览 7提问于2019-11-27得票数 0
我正在使用这个脚本，我想保存cookie，当有人在iframe框中点击时，我怎么做呢?使用这个脚本，每次用户加载页面时，脚本都会重复加载，我想“隐藏”这一天，并显示我<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<
浏览 1提问于2016-12-21得票数 0
我的Angularjs1.5应用程序在实际页面的iFrame中的MS Dynamics 365环境中运行。无论如何，看起来angularjs在等待来自Dynamics的所有JS操作完成，甚至在框架外(脚本加载等)，只有在那时它才会引导实际的自己的应用程序。 这会导致许多性能加载问题。等待脚本"jQuery.js，module1.js等等。”然后你被允许启动，因为那实际上是你所需要的全部“？
浏览 12提问于2018-12-21得票数 0
我想用动态html和脚本加载一个iframe，然后执行它。在我的html文档中，我有一个简单的iframe标记：以及我的jQuery脚本，它加载文档就绪，并准备iframe：
$( document ).ready(function/ajax/libs/jquery/2.1.4/jquery.min.js"><
浏览 1提问于2015-10-30得票数 1
回答已采纳
可以在Jest test中访问iframe内容吗？这就是我的方法。不幸的是，那里没有运气。headerElement未定义。document.body.innerHTML = ` class="js-iframe" onload="${iframeLoaded()}"
浏览 0提问于2021-01-20得票数 1
我有一个有onload事件的iframe。这个事件调用了一个我放在服务器端脚本中的函数(iframe_load)。似乎当我的屏幕启动时，onload事件在服务器端脚本加载之前触发，我得到一个错误，因为找不到函数。我当前的代码： if(typeof iframe_flag != "undefined"){
iframe_load();
浏览 1提问于2012-10-19得票数 2
</h1>test.html包含以下内容：由于某种原因我无法控制test.html，但我必须将iframe包含在我的页面中。有没有一种方法可以不使用
等待直到我的页面的onload事件设置if
浏览 1提问于2018-12-02得票数 8
1回答
开合铬延长线
、、、
我在网站的DOM中插入了一个iframe，这不是一个标准的弹出窗口。现在，每当单击图标时，我都会隐藏它，但每当加载新页/选项卡时，它仍然会插入iframe。我试着删除iframe，它可以工作，但是每次我重新插入它时都会触发content_script，重新抓取网站并添加到数组中，这使得TTS在每次重新打开扩展时都会重复单词。": [ "
浏览 1提问于2017-11-08得票数 0
回答已采纳
1回答
我的页面中有一个如下所示的iFrame： <f:verbatim>
<iframe src="/levelup/resources}/#{cc.attrs.src_html}" width="700px" height="800px" frameborder="0" id="gameFrame"
浏览 7提问于2010-12-23得票数 2
回答已采纳
我试图通过JS追加脚本标记并设置它的src。myscript = document.createElement('script');错误null为空或不为对象player.js
有什么解决方案吗?如何追加脚本标记并设置它的src(从JSON检索)。
浏览 2提问于2012-01-19得票数 0
1回答
如何延迟iFrame的加载？iFrame (页面底部)是：
<iframe id="'src‘，并在DOM准备好之后，用id #iframe_id 将其加载到iframe中。目前我认为(窗口).load是一个更好的方法，因为它会在滑块之后加载<em
浏览 3提问于2015-05-03得票数 1
回答已采纳
我有一个包含parent.js的超文本标记语言页面。在该html中，将在运行时创建一个iFrame。此iframe需要在其上下文中包含parent.js。如果我有一个在parent.js中，我可以从iframe.js调用它，比如但我需要在iframe上下文中调用它，比如因此，我在iframe html中再次加载了par
浏览 0提问于2012-07-13得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
