Question

我正在编写一个脚本，需要在iframe中执行一些操作。它是我不拥有的网站的用户脚本，因此，由于跨域问题，我不能仅使用我自己的代码将src的{{1}}设置为页面。相反，我正在动态构建iframe。

要做到这一点，我有

iframe

现在，注入的脚本需要jQuery，但由于某些原因，注入的脚本运行时不会加载jQuery - 即使jQuery位于function childScripts(){ //Stuff that must be injected into the iframe. //Needs jQuery } //because I'm lazy: var iframeWin=$('#my-iframe')[0].contentWindow; //Load jQuery: var script = iframeWin.document.createElement("script"); script.type = "text/javascript"; script.src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" iframeWin.document.head.appendChild(script); //Inject script var script = iframeWin.document.createElement("script"); script.type = "text/javascript"; script.textContent="("+childScripts.toString()+")()"; iframeWin.document.body.appendChild(script);且注入的脚本位于<head>。

我尝试了其他解决方法 - 使注入的脚本运行<body>。我不喜欢设置超时和检查jQuery是否存在的想法，我更喜欢更优雅的解决方案。

我也尝试将onload对象复制到$，但当然这不起作用，因为它只是反向引用父iframeWin.$并操纵父文档。

Answer 1

使用jQuery操纵iframe更容易。请尝试：

$('<iframe id="my-iframe"/>').load(function(){
  $('#my-iframe').contents().find('body').append('asd').end()
                            .find('body').append('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>').end()
                            .find('body').append('<script>$(function() {alert("hello from jquery");console.log("hello from jquery"); })<\/script>');                             

}).appendTo("body");

放置：

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script> 
        $('<iframe id="my-iframe"/>').load(function(){..... 
    </script> 
</body> 
</html>

在iframe中加载jQuery

1 个答案: