如何在Iframe中读取加载的脚本

How can I read the loaded scripts in an Iframe?

本文关键字：加载 脚本 读取 Iframe      更新时间：2023-09-26

如何读取Iframe中加载的脚本

我想回显iframe外部的变量，并在iframe之外使用script.js中的变量。

我的代码：

<script type="text/javascript">
  var myIFrame = document.getElementById(ifr_id);
  var script = myIFrame.contentWindow.document./*script.js*/;
</script>

在Iframe的<head>:<script type="text/javascript" src="script.js"></script>。

script.js:

$rootScope.texts = {
  content : 'inceptos suspendisse etiam tempor posuere volutpat tempor dapibus varius nullam sagittis nibh amet in mattis quisque, conubia tempor at eros turpis erat, phasellus tincidunt tristique nisl.', 
  copyright       :   '--- © 2014 RobbieWilliams Interactive. All rights reserved.',
};
  • 我如何加载<脚本>#39；s变成了iframe？（但我想要相反的）

像这样读出

var scripts = myIFrame.contentWindow.document.getElementsByTagName("script");
for (var i=0;i<scripts.length;i++) {
   if (scripts[i].src) {
       console.log(i,scripts[i].src);
   } else {
       console.log(i,scripts[i].innerHTML);
   }
}

这应该行得通。

或者您可以尝试使用myIFrame.contentWindow.document.scripts。看见https://developer.mozilla.org/en-US/docs/Web/API/document.scripts

这取决于iFrame的来源。如果IFrame源域与父DOM的源域相同，则可以访问该IFrame的DOM。这将允许您使用jquery获取脚本元素。豪威，我不确定。我从未尝试过将javascript作为html。

$('iframe > script').html();

然后，您就可以使用console.log（）在控制台中显示它，或者在父dom中显示它。

如果源域不相同，则需要使用如下插件：http://benalman.com/projects/jquery-postmessage-plugin/

这个插件允许来自不同域的iframe相互通信。但是，您需要访问iframe源代码才能将此javascript包含在iframe中。

首先，为了访问iframe元素，源页面和iframe必须在同一域中，或者启用CORS以允许资源共享。

  • 同源政策
  • 打破跨领域壁垒
  • 规避同源政策的方法
  • 用jQuery AJAX加载跨域html页面

假设您可以访问iframe内容，则可以获得iframe的内容：

var iframe = $('#frame_main').contents(),
    scripts = iframe.find('script'),
    target = scripts.find('[src$="script.js"]').first();

现在我们有了脚本，我们将在页面中异步插入和执行脚本，并在加载脚本时使用onload事件的回调做出反应。

var js = document.createElement('script');
js.type = 'text/javascript';
js.src = target.attr("src");
js.onload = function() {
    // do something when the script has been executed
};

正如我们所知，HTML是线性呈现的（除非调用方函数是异步回调），这意味着当前执行的脚本是最后一个，所以我们将在当前脚本之后插入新脚本。

var currentScript = $("script").last();
currentScript.after(js);

现在，script元素已经添加到文档中，它将异步执行，并且由于onload回调，我们可以在执行脚本时做出反应。

相关文章：