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

编辑：刚发现这是一个铬问题，代码在Firefox中工作正常如何插入JavaScript文件到iframe中，然后在插入的javascript中调用函数？

我有一个网页上的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标签是inse直接进入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 
}

来源

2012-07-31 brif

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

试试这个：

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

这将等待半秒钟想这应该给页面TIEM加载功能之前。延迟时间以毫秒为单位给出。

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

你会尝试这样的：

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

来源

2012-07-31 17:40:27

谢谢ash，试过你的建议，但没有运气。看起来这也是一个只有铬的问题。 – brif 2012-07-31 20:45:09

哇！（奇怪！）setTimeout（function（）{iFrameID.contentWindow.initialiseApi（）;}，500）;虽然jquery不会触发！再次感谢布莱恩 – brif 2012-07-31 21:07:42

您正在执行它马上没有给脚本机会加载。将一个onload事件连接到脚本块，然后运行主函数。

来源

2012-07-31 17:27:40

嗨Diodeus，感谢您的快速响应。我尝试了您的建议，但遇到同样的问题。我已经用你的测试更新了我的问题。 – brif 2012-07-31 17:38:41

你的.initialiseApi（）函数在哪里？ – 2012-07-31 17:42:48

嗨Diodeus，initialiseAPI（）它仍然在iFrameApi.js中。我没有改变这一点。谢谢 – brif 2012-07-31 17:56:34

试试，包含在iFrame中的页面，通过执行类似访问主页：

window.parent.xyz = something;

哪里something是你想要的暴露到主页。可能是函数或函数的对象。现在，在主要页面，你可以这样做：

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

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

来源

2012-07-31 17:28:33 Marshall

嗨马歇尔，谢谢你的回复。我的问题不是很清楚，对不起。我不想编辑iframe页面中的html。将会有很多'book'加载到这个iframe中，所以如果可能的话，动态插入javascript应该更清晰。 – brif 2012-07-31 17:40:40

最简单的方法是调用initialiseApi功能在iframeAPI.js本身，因为它会尽快它的加载调用。 iframeAPI.js可能如下所示：

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

没有需要的回调或超时。

来源

2015-08-12 19:16:16 Sandro

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

回答

相关问题