使用 javascript 删除 iframe答案

【问题标题】：Remove iframe with javascript使用 javascript 删除 iframe
【发布时间】：2013-02-12 18:08:43
【问题描述】：

我正在尝试删除文档中的 iFrame 标签。这就是功能。但它似乎不起作用。这是我的示例代码

<script>
function removeiframe() {
            alert("Hello Lovely World");
            var markup = document.body.innerHTML;
            
            var filtered=markup.replace(/(<iframe.*?>.*?<\/iframe>)/g,"");
            alert("he: " + markup);
//markup = Regex.Replace(markup, @"<script.*?/script>", "", RegexOptions.IgnoreCase);
//markup = Regex.Replace(markup, @"<iframe.*?/iframe>", "", RegexOptions.IgnoreCase);
markup = filtered;
document.body.innerHTML = markup + "<hr><hr>HELLO";
        }
</script>
<body onload="removeiframe()">
    
        <iframe marginheight="0" src="http://www.hotelanswer.com" marginwidth="0" frameborder="0" height="180" scrolling="no" width="210"></iframe><br>
</body>

【问题讨论】：

标签： javascript html regex iframe

【解决方案1】：

这是一个您可以运行的脚本，它将从您的文档中删除所有 iframe。这是这个工作的一个例子：http://jsfiddle.net/5hh9H/

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

【讨论】：

如果存在多个 iframe，则此代码无法正常工作，因为在这种情况下 iframe 是一个实时集合，只要我们从文档中删除 iframe，它就会更新
@s.ermakovich 我认为这不一定正确，但我还是将其更改为静态集合。

【解决方案2】：

您没有提到为什么需要在文档中删除 iframe。

我这样做是为了防止 Clickjacking 攻击。但它适用于任何情况。

你需要这个：

<style id="defendClickjack" type="text/css">body{display:none;}</style>

然后

<script type="text/javascript">
    if (self === top) {
        var defendClickjack = document.getElementById("defendClickjack");
        antiClickjack.parentNode.removeChild(defendClickjack);
    }
    else {
        top.location = self.location;
    }
</script>

您可以在此处找到更多信息：

【讨论】：

【解决方案3】：

纯 Javascript 代码：

document.querySelectorAll('iframe').forEach(
  function(elem){
    elem.parentNode.removeChild(elem);
});

【讨论】：

【解决方案4】：

如果您只想在移动设备上执行此操作，请在此处对 Matt's 原始示例稍作改进。对我来说，用例是我在我的网站上使用嵌入的 Vimeo 来创建视频背景。我需要放弃移动设备上的视频以获得性能。这样就可以了。

$( document ).ready(function() {      
    let isMobile = window.matchMedia("only screen and (max-width:650px)").matches;
        if (isMobile) {
            var iframes = document.querySelectorAll('iframe');
            for (var i = 0; i < iframes.length; i++) {
            iframes[i].parentNode.removeChild(iframes[i]);
            }
        }
    });

s.ermakovich 关于代码无法在多个 iframe 上正常工作的评论不是“错误”，而是有点误导......并且取决于具体情况。我的 Vimeo iFrame 有一个子框架在 DOM 完成后继续发出请求。 Matt 的代码确实破坏了两者。

在我的情况下，我的 第二个 iframe 是父母的 直接孩子 。如果页面上有多个不是同一父级的直接子级的 iframe，并且您只是复制并粘贴该代码，则该代码可能不起作用。在这种情况下，您需要更具体：

如果您的页面上有多个 iFrame，您可以为查询选择器添加特定性。您根据情况选择是否要使用 querySelectorAll()，但我认为没有任何理由不能使用 querySelector()。

document.querySelector(".foo > bar iframe")
document.querySelector("foo bar > iframe")

如果您有一个 iframe 网格，则可能有多个嵌入的视频连续

document.querySelectorAll("foo > .bar > iframe")

或者可能更好地来自相同的数据源...

document.querySelectorAll("iframe[data-src]")

如果我在某处错了，请有人纠正我

【讨论】：

【解决方案5】：

您应该将 iframe 放在 div 元素中。

<div id="kk">
  //your iframe
</div>

然后使用 jQuery 移除 iframe。

$('#kk').click(function(){
   $(this).html("");
});

这是一个可能的解决方案。

【讨论】：