Question

所以我试图将外部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正在输出。

感谢

Answer 1

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

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

appendChild

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

Answer 2

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

将外部js注入自己创建的iframe

2 个答案: