Question

我的目标是使用jQuery（例如Google AdSense脚本）动态创建iframe并将广告JavaScript写入其中。我的代码适用于Chrome，但在Firefox中间歇性地失败，即有时广告脚本会运行并呈现广告，有时则不会。当它不起作用时，脚本代码本身会显示在iframe中。

我的猜测是因为iframe在写入时没有准备好，所以会发生这些间歇性故障。我已经尝试了 iframe_html 的各种迭代（我的函数名称应等待iframe准备就绪），但没有运气。任何帮助表示赞赏！

PS：我已阅读各种帖子（例如jQuery .ready in a dynamically inserted iframe）。只是让每个人都知道我已经完成了对此的研究，但我被困住了：）

迭代1：

function iframe_html(html){
 $('<iframe name ="myiframe" id="myiframe"/>').appendTo('#maindiv');
 $('#myiframe').load(
   function(){
    $('#myiframe').ready( function(){
     var d = $("#myiframe")[0].contentWindow.document;
     d.open();
     d.close();
     d.write(html);
     });
   }
 );
};

迭代2：

function iframe_html(html){
 $('<iframe id="myiframe"/>').appendTo('#maindiv').ready(
   function(){
    $("#myiframe").contents().get(0).write(html);
   }
 ); 
};

Answer 1

老实说，我在处理iframe上的加载事件时发现的最简单，最可靠的方法是使用实际iframe标记中的“onload”属性。一旦“onload”事件触发，我就没有遇到过设置内容的问题。这是一个例子：

<html>
    <head>
        <script type='text/javascript' src='jquery-1.3.2.js'></script>
        <script type='text/javascript'>
            $(function() {
                var $iframe = $("<iframe id='myiframe' name='myiframe' src='iframe.html' onload='iframe_load()'></iframe>");
                $("body").append($iframe);
            });
            function iframe_load() {
                var doc = $("#myiframe").contents()[0];
                $(doc.body).html("hi");
            }
        </script>
    </head>
    <body></body>
</html>

这个问题是您必须使用属性标记和全局函数声明。如果你绝对不能拥有这些东西，我没有遇到过这方面的问题（虽然它与你的尝试没什么不同，所以我不确定）：

<html>
    <head>
        <script type='text/javascript' src='jquery-1.3.2.js'></script>
        <script type='text/javascript'>
            $(function() {
                var $iframe = $("<iframe id='myiframe' name='myiframe' src='iframe.html'></iframe>");
                $iframe.load(iframe_load);
                $("body").append($iframe);
            });
            function iframe_load() {
                var doc = $("#myiframe").contents()[0];
                $(doc.body).html("hi");
            }
        </script>
    </head>
    <body></body>
</html>

这是DOM和JavaScript中最令人沮丧的部分之一 - 我对你表示哀悼。如果这些都不起作用，那么打开Firebug并告诉我错误信息是什么。

Answer 2

false.html：

<html>
<head><title></title></head>
<body></body>
</html>

JS：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

function iframe_html(html)
{
 var id = "myiframe_" + ((new Date()).getTime());

 $('<iframe src="false.html" name ="'+id+'" id="'+id+'" />').appendTo('#maindiv');

 var loadIFrame = function()
 {
      var elIF = window.document.frames[id];
      if (elIF.window.document.readyState!="complete") 
      {
        setTimeout(loadIFrame, 100);
        return false;
      }

      $(elIF.window.document).find("body").html(html);
 }

  loadIFrame();


};
$(function(){

    iframe_html("<div>hola</div>");

}); 
</script>
</head>
<body>
<div id="maindiv"></div>
</body>
</html>

然后请查看此link

无法使用jQuery写入动态iframe

2 个答案: