Javascript創建和刪除iframes onClick

我試過閱讀信息，但發現自己迷路了。Javascript創建和刪除iframes onClick

有沒有辦法使用javascript創建和刪除iframe？

要做的事：在按鈕上單擊創建並刪除一個iframe 10次，但我不明白如何關閉iframe。

<html> 
<body> 
<button type="button" onclick="removeIFrame()">Click Me!</button> 
    <div class="top" onclick="removeIFrame();"></div> 
    <iframe id="iframe" src="www.google.com" width="200" height="100"></iframe> 
    <div class="top"></div> 
</body> 
<script type="text/javascript"> 
    function removeIFrame() { 
var iframes = document.querySelectorAll('iframe'); 
for (var i = 0; i < iframes.length; i++) { 
    iframes[i].parentNode.removeChild(iframes[i]); 
} 
} 
</script> 
</html>

我看到現在，我忘了結尾，現在它的工作。有沒有辦法重新創建iframe？

編輯2：https://jsfiddle.net/fp87vb9j/2/

<html> 
<body> 
<button type="button" onclick="removeIFrame()">Click Me!</button> 
    <div class="top" onclick="removeIFrame();"></div> 
    <iframe id="iframe" src="www.google.com" width="200" height="100"></iframe> 
    <div class="top"></div> 
</body> 
<script type="text/javascript"> 
    function removeIFrame() { 
var iframes = document.querySelectorAll('iframe'); 
for (var i = 0; i < 10; i++) { 
var ifrm[i] = document.createElement("iframe"); 
     ifrm[i].setAttribute("src", "http://google.com/"); 
     ifrm[i].style.width = "640px"; 
     ifrm[i].style.height = "480px"; 
     document.body.appendChild(ifrm[i]); 
     setInterval(div_show, 5 * 1000); 
    iframes[i].parentNode.removeChild(iframes[i]); 
} 
} 
</script> 
</html>

新問題：未捕獲的ReferenceError：createIFrames沒有定義

<html> 
<body> 
<button type="button" onclick="removeIFrame()">Click Me!</button> 
<button type="button" onclick="createIFrames()">Create iframe!</button> 
    <div class="top" onclick="removeIFrame();"></div> 

    <iframe id="iframe" src="www.google.com" width="200" height="100"></iframe> 
    <div class="top"></div> 
</body> 
<script type="text/javascript"> 
    function removeIFrame() { 
var iframes = document.querySelectorAll('iframe'); 
for (var i = 0; i < iframes.length; i++) { 
    iframes[i].parentNode.removeChild(iframes[i]); 
} 
} 
</script> 
<script type="text/javascript"> 
    function createIFrames() { 
var ifrm = document.createElement("iframe"); 
     ifrm.setAttribute("src", "http://hello.com/"); 
     ifrm.style.width = "640px"; 
     ifrm.style.height = "480px"; 
     document.body.appendChild(ifrm); 

} 
} 
</script> 
</html>

來源

2017-09-30 Stephanie Sotelo

與我們分享你的代碼。最好是創建一個小提琴 – RashFlash

添加代碼+ jsfiddle，感謝您的建議 –

你可以試試這個：在HTML iframe中，然後

首先創建和做一個刪除按鈕和刪除按鈕的動作，這將工作從您的網頁刪除iframe

var iframes = document.querySelectorAll('iframe'); 
for (var i = 0; i < iframes.length; i++) { 
    iframes[i].parentNode.removeChild(iframes[i]); 
}

來源

2017-09-30 03:44:13

它不會工作，請檢查我的編輯請。 –

@在循環中使用document.create elemetnt（'iframe'），併爲此設置all屬性。 –

https://jsfiddle.net/fp87vb9j/2/？ –

希望這會有所幫助。您可以在下面的代碼中找到註釋。基本上，需要等到所有iframe使用onload事件加載，然後逐個刪除每個iframe。

window.onload = function() { 
 
\t var count = 0; //set counter to 0 
 

 
\t //Create iframes 
 
\t for (i = 1; i <= 10; i++) { 
 
\t \t var iframe = document.createElement("iframe"); 
 
\t \t iframe.src = "https://www.google.com"; 
 
    
 
\t \t iframe.onload = function() { //Check for onload event of iframe 
 
\t \t \t count++; //Increment counter 
 
\t \t \t removeAllIframes(); //Call removeAllIFrames function 
 
\t \t }; 
 
    
 
\t \t document.body.appendChild(iframe); //Append iframe to body element 
 
\t } 
 

 
\t function removeAllIframes() { 
 
\t \t if (count == 10) { //Execute removal of iframe only after all iframes have been loaded 
 
    
 
\t \t \t var iframes = document.querySelectorAll("iframe"); //Get all iframes 
 
     
 
\t \t \t for (var i = 0; i < iframes.length; i++) { //Loop through the iframes 
 
\t \t \t \t //Remove iframes one by one 
 
\t \t \t \t setTimeout(function(i) { return function() {iframes[i].parentNode.removeChild(iframes[i]) }; }(i), 1000*i); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
}

來源

2017-09-30 04:40:53

Javascript創建和刪除iframes onClick

回答

相關問題