После динамического изменения содержимого iframe, как мне получить обновленный контент?
var target = document.getElementById('page_demo').contentWindow.document.body.innerHTML;
Даст мне его копию, но он не отражает никаких обновлений, которые я сделал для него.Он возвращает содержимое до того, как были внесены какие-либо изменения!
Редактировать:
Чтобы объяснить, что я пытаюсь сделать.Я использую grapejs для создания HTML-страниц.Я хочу добавить к нему шорткод, динамически генерировать ссылки на страницы и вставлять их.В grapejs шорткоды представлены значками.Это все работает, кроме второго изменения перезаписывает первое изменение.Поэтому мне нужно выяснить, как сделать оба (или все, если я добавлю какие-либо другие) изменения!
$('#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
});
}
Редактировать 2: В моем коде происходит нечто очень странное.В качестве эксперимента я скопировал содержимое iframe в текстовую область.Затем я прошел по одной строке за раз.Это показало, что часть изменений оба были внесены, но как только я добрался до строки, которая получила подстроку, первое изменение было стерто, Не уверен, где отсюда слизь.Кто-нибудь знает, почему следующая строка повлияет на содержимое текстовой области?
var res = new_content.substring( insert_sidenav + 16, insert_start + 9 );
Обратите внимание, что переменная new_content является просто текстовой строкой!