Javascript 获取动态更改的iframe内容

动态更改iframe内容后，如何获取更新的内容

    var target = document.getElementById('page_demo').contentWindow.document.body.innerHTML;

将给我一份副本，但它不反映我对它所做的任何更新。它会在进行任何更改之前返回内容

编辑：

进一步解释我想做什么。我正在使用grapejs创建html页面。我想给它添加短代码，动态生成页面链接并插入它们。在图形中，短代码由图标表示。除了第二个更改覆盖第一个更改之外，所有这些都可以工作。因此，我需要弄清楚如何使这两个（或所有，如果我添加任何其他）的变化发生

$('#page_demo').contents().find("body").html( css + page_data );
$('#page_demo').contents().find("body").css( page_css );

//there are 2 shortcode items pre inserted in to a grapesjs editor
//<div id="insert_navbar"><span title="Navbar" id="iavph" class="fa fa-navicon text-white"></span></div>
//<div id="insert_sidenav"><span title="Sidebar Navigation" class="fa fa-navicon"></span></div>

// check if we need to insert a navbar at shortcode location!
if( document.getElementById( "page_demo" ).contentWindow.document.getElementById( "insert_navbar" ) ){
    var e = document.getElementById( "page_demo" ).contentWindow.document.getElementById( "insert_navbar" );
    // extract class part!!!
    var parts = e.innerHTML.split('class="');
    var thePart = parts[1];
    var nextparts = thePart.split('"');
    var the_class = nextparts[0];
    //remove place holder icon
    var final_class = the_class.replace('fa fa-navicon', '').trim();

    //generate navbar link items!
    $.post( "quicknav.php", { content_changed : 1, final_class : final_class }, function( data ){ 
        // update display
        e.innerHTML = data;
        //the navbar links have been inserted!
    });
}

// check if we need to insert a sidebar menu at shortcode location!
if( document.getElementById( "page_demo" ).contentWindow.document.getElementById( "insert_sidenav" ) ){
    var e = document.getElementById( "page_demo" ).contentWindow.document.getElementById( "insert_sidenav" );
    // extract class part!!!
    var parts = e.innerHTML.split('class="');
    var thePart = parts[1];
    var nextparts = thePart.split('"');
    var the_class = nextparts[0];
    //remove place holder icon
    var final_class = the_class.replace('fa fa-navicon', '').trim();

    //generate side nav link items!
    $.post( "quicknav.php", { content_changed : 2, final_class : final_class }, function( data2 ){ 
        // update display
        e.innerHTML = data2;
        //*** once we ger here, the final output has changed to reflect that the side nav links are present
        // but the navbar links have reverted back to the initial state before insertion
    });
}

---

请注意，变量new_content只是一个文本字符串

.innerHTML

以表示HTML文本树的字符串形式返回静态内容

给定：相同来源的内容，然后：

也许你应该考虑使用一个活的NODLIST或HTMLCube，这样：

target = document.getElementById('page_demo').contentWindow
                           .document.getElementsByTagName('body')

---

但我不想添加，我想替换页面的指定部分！到目前为止，如果有两个项目存在，我想替换它们。在未来，这可能会扩展到两个以上的项目！另外，我想替换它们的原因是，我需要删除其中的图标，因为它只是grapesjs编辑器中的一个占位符。一个符号，告诉正在编辑的人该项目在那里！！“获取动态更改的iframe内容”是个问题吗？“如果我更改了部分内容，那么我需要获取整个内容，其中包括更新的内容。到目前为止的尝试都返回了内容，而没有对其进行任何更改。这就是为什么我需要“获取动态更改的iframe内容”“我的代码中有一些非常奇怪的东西。作为实验，我将iframe的内容复制到文本区域。然后我一行一行地穿过它。它显示了两个更改都在进行的部分，但当我到达一行获得子字符串时，第一个更改被删除，不确定从这里转到哪里。我使用textarea是因为我想查看实际的源代码，而不是呈现的html！

target = document.getElementById('page_demo').contentWindow
                           .document.getElementsByTagName('body')