使用jQuery删除iframe中的body标签答案

【问题标题】：Remove body tag within iframe with jQuery使用jQuery删除iframe中的body标签
【发布时间】：2016-01-26 04:59:54
【问题描述】：

我想从包含在 WooCommerce (http://www.shapur.com/product-category/fp-journe/) 中的 prettyPhoto 灯箱插件中的 iframe 中删除不必要的标题。当您单击该页面底部的单个产品按钮时，它应该删除 iframe 中包含的 body 标记。 iframe 符合同源策略，所以不是这样。

我在同一域上创建了一个测试页面，效果很好：http://www.shapur.com/test.php。

与灯箱有冲突吗？我只是不明白。感谢您的帮助。

这是测试页面的代码：

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="http://shapur.com/index.php"></iframe>

<p>Click the button to change the style of the body tag contained in the iframe.</p>

<button onclick="myFunction()">Try it</button>

<script>
    function myFunction() {
        var x = document.getElementById("myframe");
        var y = x.contentDocument;
        y.body.style.display = "none";
}
</script>

</body>
</html>

【问题讨论】：

iframe 内容在具有 iframe 的页面的 DOM 中不可见，因此您无法更改它。要删除它，您需要在托管的页面上触发事件通过 iframe。
需要确保 iframe 先加载
@DinoMyte 在测试页面 (shapur.com/test.php) 我能够在 iframe 中托管的页面上触发事件。

标签： javascript jquery wordpress iframe same-origin-policy

【解决方案1】：

既然同源，何不使用jQueryload()函数：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type="text/javascript">
    function myFunction() {
       $(".myDiv").load("/index.php",function(data){
          $(data).find('body').css("display","none");
       });
    }
</script>

还有一个空的：

<div class="myDiv"></div>

这样，您可以更轻松地玩弄代码。

【讨论】：

听起来是个好建议。 Ajax 是 Wordpress 核心的一部分，不知道我将如何在上面的测试页面中实现它。我尝试使用上面的代码，但它不起作用。
糟糕，我的意思是说 jQuery load() 函数伙伴！我的错！和Ajax is a functionality of jQuery。如果它不起作用，您可以在代码顶部包含谷歌的 jQuery 库（请参阅编辑的代码）。如果您遇到任何其他错误，请告诉我。