使用 jQuery 生成 iframe 和内容

Question

我不明白为什么它不起作用。

我有一个remote.php脚本

<?php echo "Hello World"; ?>

还有一个local.php脚本

<html>

<head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        $( document ).ready(function() { document_ready(); } );

        function document_ready()
        {
            $('#vcc').click(function() { get_ajax() } );
        }

        function get_ajax()
        {
            $.ajax({ url:"remote.php",context:document.body})
            .done(function(response,context) { get_ajax_done(response,context); } );
        }
        function get_ajax_done(response,context)
        {
            $('<iframe id="myFrame" style="background-color: #FFFFFF"/>').appendTo('#someDiv');
            $('#myFrame').contents().find('body').append(response);
            $('#someDiv').addClass('done');
        }

    </script>
</head>

<body>

<div id="someDiv"></div>
<div>
    <input type="submit" id="vcc" value="Go"></input>
</div>

</body>

它正在工作。单击按钮进行 ajax 调用并接收 Hello World，iframe 已创建且可见但不包含任何内容。

如果我在

上放置（使用 firebug）一个断点

$('#myFrame').contents().find('body').append(response);

然后F10，F8后内容出现并保留！

Answer 1

我想主要问题是您没有给浏览器一些时间将 iframe 渲染到 DOM。

只需替换此代码

$('#myFrame').contents().find('body').append(response);
$('#someDiv').addClass('done');

有了这个

setTimeout(function(){
  $('#myFrame').contents().find('body').append(response);
  $('#someDiv').addClass('done');
},100);

希望对您有所帮助

检查这个fiddle

Answer 2

你应该在框架加载时插入你的回复：

    function get_ajax_done(response,context)
    {
        $('<iframe id="myFrame" style="background-color: #FFFFFF"/>')
        .appendTo('#someDiv')
        .on('load', function(){
           $(this).contents().find('body').append(response);
           $('#someDiv').addClass('done');
        })
    }

使用 jQuery 生成 iframe 和内容

Generate iframe and content with jQuery

jquery

html

ajax

iframe