如何插入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中調用函數？

回答

相關問題