動態添加HTML到iFrame - Javascript

我試圖動態地創建一個iFrame並從當前文檔添加HTML到它。 iFrame被成功創建，但是當功能到達需要添加HTML的地步時，它不會這樣做。動態添加HTML到iFrame - Javascript

這裏是我的代碼：

function createiFrame(min, max, key) { 
    console.log("Max-Width", max); 

    //CREATING A CLASS FOR THE IFRAME 
    var iframeClass = key + "-" + max; 
    //var path = window.location.pathname; 
    //var page = path.split("/").pop(); 

    //ADDING AN IFRAME INTO THE DOCUMENT AND ADDING ON THE CLASS 
    $(document).ready(function() { 
     $('<iframe>', { 
      width: max 
     }).addClass(iframeClass).prependTo('body'); 
    }); 


    var requiredHTML = document.getElementById('container').innerHTML; 
    console.log("RequiredHTML", requiredHTML); 

    //ADDING THE COLLECTED HTML INTO THE IFRAME -- THIS IS WHERE 
    //IT STOPS WORKING 
    $('.' + iframeClass).ready(function() { 
     console.log("iFrame ready"); 
     $('.' + iframeClass).contents().find('body').html("<p>Testing it out</p>"); 
    }); 

    var $head = document.getElementsByTagName('head')[0].innerHTML; 
    $(document).ready(function() { 
     $('.' + iframeClass).contents().find('head').append($head); 
    }); 


}

編輯

我已經意識到這個問題發生，因爲當我試圖運行代碼時，DOM還沒有準備好。

如此新的問題;

如何準備好DOM？

來源

2015-06-10 Rafill

這是在這裏回答：http://stackoverflow.com/questions/19374524/use-jquery-to-insert-html-into-an-iframe-body-tag –

@ChristopherKarlsson感謝您的鏈接，但這個問題正在討論嵌套的iFrames，答案給出了我在我的代碼中的同一行jQuery，但它不起作用 – Rafill

這有幫助嗎？ http://stackoverflow.com/questions/205087/jquery-ready-in-a-dynamically-inserted-iframe –

檢查這個職位： addEventListener to iFrame

你需要使用 $（ '＃myIFrame'）負載（函數（）{ ....

來源

2015-06-10 15:52:22

$('.' + iframeClass).ready(function() { 
    ... 
}

不因爲準備好的iframe不會觸發.ready（）正在等待的事件「DOMContentLoaded」，您需要直接引用文檔，然後觸發DOMContentLoaded事件，這應該基於此。

$(iframeClass document).ready(function() { 
    ... 
}

我會強調，雖然這不是我之前嘗試過的，但它似乎只是您所指的文檔的問題。

來源

2015-06-10 16:02:30

動態添加HTML到iFrame - Javascript

回答

相關問題