如何将 javascript 文件插入 iframe，然后在插入的 javascript 中调用函数？答案

【问题标题】：How to insert a javascript file into an iframe then call a function in the inserted javascript?如何将 javascript 文件插入 iframe，然后在插入的 javascript 中调用函数？
【发布时间】：2012-07-31 17:25:01
【问题描述】：

编辑：刚刚发现这是一个 chrome 问题，代码在 firefox 中运行良好

我的网页上有一个 iframe，显示的是 html 格式的书籍。我想在这个 iframe 中插入一些 javascript 以使这本书更具动态性（例如单击句子、显示动画等）。 iframe 内容与父页面在同一个域中。

我可以将 javascript 插入 iframe，但在调用插入的 javascript 中的函数时出错。我在下面描述了不同的代码位：

我的父页面javascript是：

function iframeLoaded()
{
    var iFrameID = document.getElementById('preview-iframe');

    var jsLink = iFrameID.contentDocument.createElement("script");
    jsLink.src="/tests/iframeAPI.js";
    jsLink.type = 'text/javascript';
    iFrameID.contentDocument.head.appendChild(jsLink); 
    iFrameID.contentWindow.initialiseApi()
}

包含 iframe 的 html 是：

<iframe id="preview-iframe" width="640" height="240" frameborder="0" src="./testpage.htm" onload="iframeLoaded()" scrolling="no"></iframe>

iframeAPI.js 的内容是：

window.initialiseApi = function() { alert("Hello world") }

在浏览器中查看 iFrame 的 html 显示 iFrameAPI.js 标记已正确插入 iframe 头部，但在页面加载时我没有收到警报弹出窗口。错误出现在以下行：

    iFrameID.contentWindow.initialiseApi()
    Uncaught TypeError: Object [object Window] has no method 'initialiseApi'

但是，我可以在浏览器的 javascript 控制台中运行此行，并且警报弹出窗口工作正常。

任何帮助将不胜感激。

谢谢，

布赖恩

编辑：我刚刚尝试使用 onload 事件来确保页面已加载，但我仍然遇到问题：

我的父页面 javascript 现在是：

function iframeLoaded()
{
    var iFrameID = document.getElementById('preview-iframe');

    var jsLink = iFrameID.contentDocument.createElement("script");
    jsLink.src="/tests/iframeAPI.js";
    jsLink.type = 'text/javascript';
    iFrameID.contentDocument.head.appendChild(jsLink); 
    jsLink.onLoad= iFrameLoaded();
}

function iFrameLoaded()
{
    alert("Iframe loaded"); // Alert works ok 
    var iFrameID = document.getElementById('preview-iframe');
    iFrameID.contentWindow.initialiseApi(); // Same error message on this line
}

【问题讨论】：

标签： javascript html iframe

【解决方案1】：

听起来您正在尝试在内容加载之前使用该功能。

试试这个：

var t = setTimeout(iFrameID.contentWindow.initialiseApi(),500);

这将等待半秒钟，然后再尝试应该让页面加载的函数。延迟时间以毫秒为单位。

更好的方法是尝试使用 Jquery 及其 ready() 方法，但这需要同时加载 jquery 库。在我看来，这是非常值得的，请参阅 http://api.jquery.com/ready/。

你会尝试这样的：

$("body",iFrameID.contentWindow.document).ready(iFrameID.contentWindow.initialiseApi())

【讨论】：

感谢 ash，尝试了您的建议，但没有成功。看起来这也是 chrome 唯一的问题。
哇！谢谢——这个小改动起作用了（奇怪！） setTimeout(function(){iFrameID.contentWindow.initialiseApi();},500); jquery 就绪但不会触发！再次感谢，布赖恩

【解决方案2】：

您正在立即执行它，而没有给脚本加载的机会。将 onload 事件连接到您的脚本块，然后运行您的 main 函数。

【讨论】：

您好 Diodeus，感谢您的快速回复。我尝试了您的建议，但遇到了同样的问题。我已经用你的测试更新了我的问题。
你的 .initialiseApi() 函数在哪里？
嗨 Diodeus，initialiseAPI() 它仍在 iFrameApi.js 中。我没有改变它。谢谢
1) 确保您的文件确实在加载（使用 Firebug）。 2）制作一个调用该函数的按钮，并在单击时查看它是否有效。
谢谢，我试过在 chromes 中等效于 firebug 并且 initialiseAPI 行工作正常，所以它正在加载。（对不起，这就是我在原始问题中的“浏览器 javascript 控制台”的意思）

【解决方案3】：

尝试在 iFrame 中包含的页面中，通过执行以下操作访问主页：

window.parent.xyz = something;

something 是您希望在主页上显示的内容。可以是函数或函数的对象。现在在主页中你可以这样做：

something(); // or something.somefunction();

我认为您也可以发送窗口引用，但我没有尝试过。

【讨论】：

嗨，马歇尔，感谢您的回复。我的问题不是很清楚，抱歉。我不想在 iframe 页面中编辑 html。这个 iframe 中会加载很多“书籍”，所以如果可能的话，动态注入 javascript 应该会更干净。

【解决方案4】：

最简单的方法是在 iframeAPI.js 本身中调用 initialiseApi 函数，因为它会在加载后立即调用。 iframeAPI.js 可能如下所示：

function initialiseApi() { 
    alert("Hello world"); 
}
initialiseApi();

不需要回调或超时。

【讨论】：