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

Question

编辑：刚发现这是一个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
}

Answer 1

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

试试这个：

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

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

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

你会尝试类似的东西：

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

Answer 2

你正在执行它而不给脚本一个加载的机会。 将onload事件连接到脚本块并运行主要功能。

Answer 3

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

window.parent.xyz = something;

哪些something是你想要暴露在主页面的东西。 可以是函数的函数或对象。 现在在主页面中你可以做到：

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

我想你也可以发送窗口参考，但我还没试过。

Answer 4

最简单的方法是在iframeAPI.js本身中调用initialiseApi函数，因为它将在加载后立即调用。 iframeAPI.js看起来像这样：

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

不需要回调或超时。