如何使用window.open(）方法将一块html附加到加载的html页面

How to append a chunk of html to a loaded html page using window.open() method

本文关键字：html 页面 一块 加载 window 何使用 open 方法      更新时间：2023-09-26

我正试图通过window.open((方法将一块html附加到加载的html页面。在本例中，html块将是一个字符串。

var w = window.open('mypage.html, 'windowname', 'scrollbars=yes,location=no,toolbar=no,status=no,width=500,height=550,left=300,top=50');
var htmlChunk = '<span>bla bla</span>'
 $(w.document.body).append( htmlChunk );

$(w.document.body(似乎无法访问弹出窗口中mypage.html上的body标记。

我还尝试使用现成的方法。

 $(w.document.body).ready(function(){
         $(this).find('body').append(htmlChunk);
     });

这也不起作用——它把它附加到弹出窗口下面的窗口中。

这里需要明确的是，我不想直接向mypage.html添加任何JS。我需要能够访问弹出的mypage.html body标记，并在其中附加一块html。在我的设置中，我在main.html页面中有一个js文件。在main.html页面中，我有一个链接，上面有一个点击事件，该事件设置在js文件中。这就是我调用弹出窗口的地方，我从main.html页面捕获一块html，并将其附加到弹出窗口中的mypage.html。

您可以这样做：

$(w).on("load", function(){
    $("body", w.document).append( htmlChunk );
});

onload事件处理程序使代码等待，直到创建了新窗口，并使用w.document作为jQuery的第二个参数来设置新窗口上的上下文。您不能从子窗口运行jQuery实例，因为它没有加载jQuery。

如果我没有弄错的话，jQuery中的$((-运算符应该在页面"就绪"时运行。所以你可以试着简化一下你的代码吗？

我会这样做：

$(function(){
    $("body").append("This is the string you send in");
});

<script type="text/javascript">
    $(document).ready(function () {
        var output = "data";
        var OpenWindow = window.open("mypage.html", "mywin", '');
        OpenWindow.dataFromParent = output; // dataFromParent is a variable in mypage.html
        OpenWindow.init();
    });
</script>

在mypage.html中：

<script type="text/javascript">
    var dataFromParent;    
    function init() {
        document.write(dataFromParent);
    }
</script>

如果您需要在新窗口的DOM准备好后运行代码，请尝试以下操作：

var OpenWindow = window.open("mypage.html", "mywin", '');
$(OpenWindow.document.body).ready(function() {
    $(OpenWindow.document.body).append('<p>hi</p>');
});
相关文章：