2017-08-30 8 views
0

リフレッシュされたiframeを含むHTMLファイルに表示されるすべての画像を削除します。
CSSやJavaScriptを使用する方法がありますか?CSSまたはJavaScriptを使用してiframe内のウェブページからすべての画像を削除する

iframeを読み込むページには、次のコードが使用されています。

function reloadIFrame() { 
 
    console.log('reloading..'); 
 
    document.getElementById('iframe').contentWindow.location.reload(); 
 
} 
 

 
window.setInterval(reloadIFrame, 3000);
body { 
 
    margin: 0px; 
 
} 
 
h1 { 
 
    font-family: arial; 
 
    font-size: 50%; 
 
} 
 
iframe { 
 
    width: 100%; 
 
    height: 800px; 
 
} 
 
div.top { 
 
    background-color: rgba(2, 109, 8, 0.83); 
 
    height: 1%; 
 
    width: 100%; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="shortcut icon" href="news.png" type="image/x-icon" /> 
 
    <title>Chat</title> 
 
</head> 
 
<body> 
 
    <div class="top"> 
 
    <img src="news.png" alt="newsicons" height="31" width="31"> 
 
    <h1>News</h1> 
 
    </div> 
 

 
    <iframe id="iframe" src="http://www.bbc.com/news/world"></iframe> 
 
</body> 
 
</html>

答えて

0

あなたはJavaScriptを使用してこれを行うことができます。私はこれが原因クロス元ポリシーに動作しないかもしれないと思う...以下

if(document.getElementById('iframe')) { 
 
    var images = document.getElementsByTagName('img'); 
 
    for (i = 0; i < images.length;i++) { 
 
    images[i].style.display = "none"; 
 
    } 
 
}
<div class="top"> 
 
     <img src="news.png" alt="newsicons" height="31" width="31"> 
 
     <h1>News</h1> 
 
    </div> 
 

 
    <iframe id="iframe" src="http://www.bbc.com/news/world"></iframe>

+0

を更新スニペットを確認してください。 iframeソースが同じドメインにある場合でも動作するはずです。 – nivincp

+0

同じ発信元ポリシーはこのコードに影響を与えません。イベントはフレーム内の文書にアクセスしようとしません。 – Quentin

+0

@Quentin真実ですが、iframeのHTMLコンテンツにアクセスすると仮定します。:-) – nivincp

関連する問題