3

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

4 回答 4

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())
于 2012-07-31T17:40:27.773 回答
0

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

于 2012-07-31T17:27:40.000 回答
0

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

window.parent.xyz = something;

您希望在哪里something显示在主页上。可以是函数或函数的对象。现在在主页中，您可以执行以下操作：

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

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

于 2012-07-31T17:28:33.997 回答
0

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

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

不需要回调或超时。

于 2015-08-12T19:16:16.457 回答