爲什麼將<script>附加到動態創建的<iframe>似乎在父頁面中運行腳本？

我試圖使用JavaScript來創建一個<IFRAME>，然後<腳本>元素追加到<IFRAME>，我想在<IFRAME> d文檔的上下文中運行。爲什麼將<script>附加到動態創建的<iframe>似乎在父頁面中運行腳本？

不幸的是，看來我錯了，做的事情 - 我的JavaScript似乎成功執行，但<腳本>的上下文是父頁面，而不是<IFRAME> d文檔。當瀏覽器請求iframe_test.js時，我也在Firebug的「網絡」選項卡中得到301錯誤，雖然它然後再次請求它（不知道爲什麼？）成功。

這是我使用的代碼（在http://onespot.wsj.com/static/iframe_test.html現場演示）：

iframe_test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>&lt;iframe&gt; test</title> 
    </head> 
    <body> 
    <div id="bucket"></div> 
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $('#bucket').append('<iframe id="test"></iframe>'); 
     setTimeout(function() { 
      var iframe_body = $('#test').contents().find('body'); 
      iframe_body.append('<scr' + 'ipt type="text/javascript" src="http://onespot.wsj.com/static/iframe_test.js"></scr' + 'ipt>'); 
     }, 100); 
     }); 
    </script> 
    </body> 
</html>

iframe_test.js

$(function() { 
    var test = '<p>Shouldn\'t this be inside the &lt;iframe&gt;?</p>'; 
    $('body').append(test); 
});

一兩件事，似乎不尋常的是，該代碼在iframe_test.js即使作品;我沒有在<iframe>本身中加載jQuery，只在父文檔中。這似乎是對我的線索，但我無法弄清楚它的含義。

任何想法，建議等將不勝感激！

來源

2009-10-19 Bungle

也許這與

我沒有找到我原來的問題的答案，但我找到了另一種更好的方法（至少對我而言）。

這不會在父頁面上使用jQuery（這實際上是一件好事，因爲我不希望在那裏加載它），但它確實加載了iframe 中的jQuery，顯然是完全有效的可用的方式。我正在做的是寫iframe >的文檔對象與從頭創建的新文檔對象。這允許我簡單地將<腳本>元素包括在字符串中，然後我將其寫入<iframe>的文檔對象。

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>frame</title> 
    </head> 
    <body> 

    <div id="test"></div> 

    <script type="text/javascript"> 
     // create a new <iframe> element 
     var iframe = document.createElement('iframe'); 

     // append the new element to the <div id="bucket"></div> 
     var bucket = document.getElementById('test'); 
     bucket.appendChild(iframe); 

     // create a string to use as a new document object 
     var val = '<scr' + 'ipt type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></scr' + 'ipt>'; 
     val += '<scr' + 'ipt type="text/javascript"> $(function() { $("body").append("<h1>It works!</h1>"); }); </scr' + 'ipt>'; 

     // get a handle on the <iframe>d document (in a cross-browser way) 
     var doc = iframe.contentWindow || iframe.contentDocument; 
     if (doc.document) { 
     doc = doc.document; 
     } 

     // open, write content to, and close the document 
     doc.open(); 
     doc.write(val); 
     doc.close(); 
    </script> 

    </body> 
</html>

我希望這可以幫助別人的道路！

來源

2009-10-19 22:09:12 Bungle

這正是我正在尋找的。有沒有辦法APPEND到iframe，所以正文內容不會被刪除？ – AnApprentice 2010-04-17 02:10:14

爲什麼寫'' user2284570 2015-09-13 09:32:06

@ user2284570：瀏覽器將直接解釋內嵌'';'會被解釋爲當前腳本的提前結束標記，導致語法錯誤。 – Bungle 2015-09-13 17:53:33

對原始問題的回答很簡單 - 腳本的執行由jquery完成，並且由於jquery被加載在頂部框架中，所以腳本運行的地方也是這樣，無論你在哪裏附加它。毫無疑問，更聰明的jQuery實現可以使用正確的窗口對象，但現在事情就是這樣。

至於變通辦法，你已經有兩個很好的答案（即使是你自己的）。我可能會添加的是，您可以使用其中一種解決方法將jquery.js包含在iframe中，然後獲取該jquery對象而不是頂級對象來插入額外的標記......但這也可能會過度殺傷。

來源

2013-02-25 14:55:07 user2107721

false：https：//jsfiddle.net/vohn8w80/ – 2016-06-10 05:51:35

相關問題