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已创建，但是可见但不包含任何内容。

如果我（使用萤火虫）在

上放置一个断点

$('#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和内容

2 个答案: