1

因此，我尝试将外部 css 和 js 注入到自己创建的 iframe 中以提供额外的安全层，因此不存在跨域问题。

这是代码

<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>

<script>
$(function(){

var contents = $('iframe').contents();

styleTag = $('<link href="http://mylink.com/styles.css" media="all" rel="stylesheet" type="text/css" />').appendTo(contents.find('head'));

insertScript('https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
insertScript('https://myserver.com/myfile.js');

});

var insertScript = function(src){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
$('iframe').contents().find('head').append(script);
console.log("add script");
}

</script>

<div class="output">
<iframe></iframe>
</div>

正在输入css文件，但没有一个js文件，任何人都可以看到为什么吗？console.log 正在输出。

谢谢

4

2 回答 2

4

我认为您必须从 iframe 的文档对象创建脚本元素。它应该以 的形式提供contents[0]，您可以将其传递给 insertScript。

如果您appendChild直接在头节点上使用它（而不是 jQuery 包装器），它会起作用：

$('iframe').contents().find('head')[0].appendChild(script);

http://jsbin.com/enidiv/1/edit

于 2013-04-17T03:56:51.287 回答
0

只要 iframe 域、协议和端口匹配，您就可以添加脚本。否则，将被视为访问不同 url 的不安全尝试。

于 2013-04-17T03:52:37.397 回答