Question

我正在尝试将一些HTML代码放入iframe来呈现数据。 Everythink工作正常，但是当我想在iframe中放入任何java脚本时，没有结果。似乎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;

有没有人能解决这个问题？

谢谢

Answer 1

我假设DataURIs出于安全原因不能包含外部脚本，但我找不到确认这一点的重复SO帖子。无论如何，document.write 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();

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

Answer 2

这就是一个竞赛问题：你在加载iframe之前尝试访问json，因此，dane将是未定义的。使用听众或有点回调。

回调：

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

监听器：

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

将本地javasscript插入iframe html

2 个答案: