Javascript iframeを作成して削除するonClick

私は情報を読み込もうとしましたが、自分自身が失われていました。Javascript iframeを作成して削除するonClick

javascriptを使用してiframeを作成および削除する方法はありますか？

目的：オンボタンをクリックしてiframeを10回作成して削除しますが、iframeを閉じる方法はわかりません。

jsが、私は今それを見た私は今、それが働いて、最後に忘れてしまったhttps://jsfiddle.net/fp87vb9j/1/

<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、アドバイスありがとう –

あなたがこのために試みることがあります。

まず作成とiframe HTMLで、その後、削除ボタンを作成し、削除ボタンのアクションで、あなたのウェブページから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を1つずつ削除してください。

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 iframeを作成して削除するonClick

答えて

関連する問題