如何將IFRAME移動到DIV中？

有一個HTML內容，用戶可以自由編輯。那好，但我必須將所有IFRAME移動到DIV中。我試着這個：如何將IFRAME移動到DIV中？

$('#rolunk_content iframe').html ('<div>1' + $('#rolunk_content iframe').html() + '2</div>');

但這沒有效果。

編輯：小提琴：http://jsfiddle.net/nE3jG/

來源

2014-02-28 John Smith

你可以在HTML中編寫一些示例代碼嗎？ – naota

那是因爲你的代碼試圖設置iframe，這顯然是行不通的innerHTML ...和你的邏輯的其餘部分是錯的太...

嘗試：

$("#rolunk_content iframe").each(function() { 
    var div = document.createElement('div'), 
     rel = this.nextSibling, par = this.parentNode; 
    div.appendChild(document.createTextNode("1")); 
    div.appendChild(this); // the iframe 
    div.appendChild(document.createTextNode("2")); 
    par.insertBefore(div,rel); 
});

Vanilla JS可能更長寫的，但它是在做你期望它做什麼方面更可靠;）

來源

2014-02-28 13:02:01

那個殺了IFRAME –

「殺」了嗎？你是什麼意思？所有這一切都將它附加到一個新的poooooh，對，當你這樣做時，瀏覽器不喜歡它。對不起，沒有真正的修復。這是瀏覽器的限制。 –

這裏是一個小提琴：http://jsfiddle.net/nE3jG/ –

如果您只想將IFRAME轉換爲DIV，則可以使用jQuery .append() API。

$("#newdiv").append($("#rolunk_content iframe"));

您的代碼可能是這樣的：

<div id="rolunk_content"> 
    <p><iframe src="...." width="200" height="200"></iframe></p> 
</div> 
<input id="d" type="button"> 
<hr> 
<div id="newdiv">Your IFRAME will be moved here.</div>

和Javascript：

$('#d').click(function() { 
    $("#newdiv").append($("#rolunk_content iframe")); 
});

的小提琴是在這裏： http://jsfiddle.net/2HrA4/

和jQuery .append()的文件是在這裏： https://api.jquery.com/append/

來源

2014-02-28 13:30:23 naota

如何將IFRAME移動到DIV中？

回答

相關問題