Iframe 内容未在 JQuery 对话框中加载

Question

我有一个页面，我将在其中动态创建 iframe 并将其附加到 div。 该 div 将附加到一个 jquery 对话框。

<div id="diviframe"></div>
<script>
var iFrame = $('<iframe id="thepage" width="450" height="400"></iframe>').appendTo("#diviframe");
    var iFrameDoc = iFrame[0].contentDocument || iFrame[0].contentWindow.document;
    iFrameDoc.write('<p>Some useful html</p>');
    iFrameDoc.write('<p>Some useful stuff</p>');   
    iFrameDoc.close();


    $("#diviframe").dialog({

        autoOpen: false,
        modal: true,
        height: 500,
        width:500,
        open: function(ev, ui) {

    }

    });

$("#diviframe").dialog('open');

iframe 的内容在 jquery 对话框中打开时没有写入。 任何人都可以为此提出解决方法吗？

更新：

 function test() {
        var iFrame = $('<iframe id="thepage" width="500" height="500" src="http://stackoverflow.com"></iframe>').appendTo("#diviframe");
        var parent = "divparent";
        var iFrameDoc = iFrame[0].contentDocument || iFrame[0].contentWindow.document;
        iFrameDoc.write('<p>Some useful html</p>');
        iFrameDoc.write('<p>Some useful stuff</p>');
        iFrameDoc.close();      
        return iFrame;
    }






    var $dialog; //Must be at the global scope
    function dialog() {      
        alert(1);
        $.get(test, {}, function(html) {
            $dialog.html(html);
            $dialog.dialog("open");
        });
    }

    $(function() {
        //Initialize (without showing it)
        var $dialog = $('<div id="dialog" title=""></div>').dialog({
            autoOpen: false,
            modal: true
        });
    });
    dialog();

我尝试在 jquery 对话框加载后动态调用一个函数，但它显示了一些错误。如何从 jquery 对话框加载函数？

Answer 1

我认为你不需要为你正在做的事情使用 iframe，除非你在发布问题之前已经删除了一些重要的细节。

您可以将内容直接附加到#diviframe，它会正常显示。

$("#diviframe").append("<p>Some useful html</p>");
$("#diviframe").append("<p>Some useful stuff</p>");

我想知道 - 您是否要在对话框中创建一个可滚动面板？如果是这样，你可以设置一个 div 的 CSS 来实现你所需要的：

.myScrollableBox {
    width: 450px;
    height: 400px;
    overflow: auto;
    border: 1px solid #000;
}

您可能还想在其中添加一些填充，这样文本就不会被边界卡住。