在iframe html中插入本地javascript

insert local javasscript into iframe html

本文关键字：javascript 插入 iframe html      更新时间：2023-09-26

我正试图将一些HTML代码放入iframe中以呈现数据。Everythink工作得很好，但当我想把任何java脚本在iframe没有结果。似乎iframe看不到任何本地javascript。

下面是代码:

<html>
    <head>
        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script src="testJSON.js"></script>
    </head>
  <body>
     <iframe id="frame"></iframe>
    <p id="demo"></p>
        <script src="names.js"></script>
        <script type="text/javascript">
                $("#frame").attr(
            "src", "data:text/html;charset=utf-8," + 
            "<html><head>"+
            "<script src='jquery.min.js'><"+"/script>"+
            "<script src='testJSON.js'><"+"/script></head>"+ 
            "<body><p id='demo'></p>"+
            "<script src='name.js'><"+"/script>"+  
            "<h1>Test</h1>"+
            "</body></html>"
        );
      </script>
</body>
</html>

testJSON.js: 

var dane = '{ "names" : [' +
'{ "firstName":"Ana" , "lastName":"Doe" },' +
'{ "firstName":"Bill" , "lastName":"Smith" },' +
'{ "firstName":"Dory" , "lastName":"Jones" } ]}';

names.js: 

var nameID =function() {
    return 2;
};
obj = JSON.parse(dane);
document.getElementById("demo").innerHTML =
obj.names[nameID()].firstName + " " + obj.names[nameID()].lastName;
有人有解决这个问题的办法吗?

谢谢

出于安全原因，我假设DataURIs不能包含外部脚本，但我找不到确认这一点的重复SO帖子。总之,文档。将HTML和脚本写入框架中。作品

$("#frame")[0].document.contentDocument.write(
        "<html><head>"+
        "<script src='jquery.min.js'><'/script>"+
        "<script src='testJSON.js'><'/script></head>"+ 
        "<body><p id='demo'></p>"+
        "<script src='name.js'><'/script>"+  
        "<h1>Test</h1>"+
        "</body></html>"
    );
$("#frame")[0].contentDocument.close();

您可能需要完全限定外部文件

的url

这是一个竞争问题:你试图访问json，在iframe加载之前，因此，dane将是未定义的。使用监听器或类似的回调。

回调:

//in your page:
function parse(json){
//do sth with json
}
//in the iframe:
parse("{}");

听众:

document.getElementsByTagName("iframe")[0].onload=function(){
//you parsing js
};
相关文章：