从框架中的其他 iframe 隐藏 iframe 或 div答案

【问题标题】：Hide iframe or div from other iframe in a frame从框架中的其他 iframe 隐藏 iframe 或 div
【发布时间】：2014-08-14 07:12:23
【问题描述】：

我正在尝试从另一个包含框架集的 iframe 中显示或隐藏包含 iframe 的 div。

因此，如果您正在查看代码；我正在尝试使用 shades.html 中的函数显示或隐藏 div“dd”。 Shades.html 是 index2.html 中框架集的一部分，显示在 index.html 中的 iframe“UBERFRAME”中。

一些代码：
索引.html：

<HTML>
<BODY>
    <div style="display:block;position:absolute;top:20px;left:20px;z-index:997;">
        <iframe name="UBERFRAME" src="index2.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800; height:480; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
    </div>
    <div id="dd" name="dd" style="position:absolute;top:20px;left:20px;z-index:998;">
        <iframe id = "overlayframe" name = "OVERLAY" src="dd.png" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800px; height:480px; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
    </div>
</BODY>

index2.html：

<HTML>
<FRAMESET ROWS="51,376,53,*" FRAMEBORDER="0" FRAMESPACING="0">
    <FRAMESET COLS="70,335,324,71,*" FRAMEBORDER="0" FRAMESPACING="0">
        <FRAME SRC="HEADER/home.html" NAME="homeheader" NORESIZE SCROLLING="no">
        <FRAME SRC="HEADER/name.html" NAME="nameheader" NORESIZE SCROLLING="no">
        <FRAME SRC="HEADER/datetime.html" NAME="datetimeheader" NORESIZE SCROLLING="no">
        <FRAME SRC="HEADER/help.html" NAME="helpheader" NORESIZE SCROLLING="no">
    </FRAMESET>

    <FRAME SRC="mainempty.html" NAME="mainframe2" NORESIZE SCROLLING="no" BORDER="0">

    <FRAMESET COLS="69,142,70,316,100,103,*" FRAMEBORDER="0" FRAMESPACING="0">
        <FRAME SRC="FOOTER/so.html" NAME="so" NORESIZE SCROLLING="no">
        <FRAME SRC="FOOTER/shades.html" NAME="shades" NORESIZE SCROLLING="no">
        <FRAME SRC="FOOTER/sendsource.html" NAME="sendsource" NORESIZE SCROLLING="no">
        <FRAME SRC="FOOTER/volume.html" NAME="volume" NORESIZE SCROLLING="no">
        <FRAME SRC="FOOTER/micmute.html" NAME="micmute" NORESIZE SCROLLING="no">
        <FRAME SRC="FOOTER/outmute.html" NAME="outmute" NORESIZE SCROLLING="no">
    </FRAMESET>
</FRAMESET>

shades.html：

<HTML>
<HEAD>
    <script type="text/javascript">
        function showdd() {
            window.frames['overlayframe'].style.display = "none";
        }
    </script>
</HEAD>
<BODY>
    <a href="#" onclick="showdd(); return false;" >
      <img src="foo.png">
    </a>
</BODY>
</HTML>

或 plunkr 演示：Click

【问题讨论】：

你能提供一个 jsfiddle 或 plunkr 演示吗？
如果你尝试从 iframe 访问父元素，你会遇到一些问题。您的 iframe 如何知道您的父窗口包含什么？而不是 iframe，在页面中加载您的 html。然后，您将能够访问每个“html 文件”DOM 元素。（例如，您可以使用 jquery 加载页面，或者如果您不使用 jquery，则仅加载到 XMLHttpRequest）
你好 Larta，很抱歉，我不明白你的意思，我的网络编程技能只能用我的描述来形容，蹩脚

标签： javascript html css iframe frames

【解决方案1】：

三个页面（父文档和两个 iframe）是否来自同一个域和子域？

如果没有，您唯一真正的选择是使用window.postmessage

即使它们来自同一个域，与直接访问另一个页面的 DOM 相比，发布消息也是一种好方法。

无论有无 postmessage，您都需要引用您希望定位的 iframe 的 window 对象。

一种方法是让框架A通知父页面（通过引发事件或调用父页面js中的函数），然后让父页面通知框架B。

如果您提供示例页面，我可以为您创建一个工作示例。

编辑：下面的代码示例来自您提供的示例的解决方案。注意框架是如何调用函数父文档的。然后父文档操作另一个 iframe 的 DOM。

plunkr

在 A 帧中：

 $('#show').click(window.parent.showDuck);
  $('#hide').click(window.parent.hideDuck);

在父文档中：

 function showDuck(){

  $('#overlayframe')[0].contentWindow.document.getElementById('duck').style.setProperty('visibility', 'visible');
      }

    function hideDuck(){
  $('#overlayframe')[0].contentWindow.document.getElementById('duck').style.setProperty('visibility', 'hidden');

}

【讨论】：

查看页面底部 ;) 我刚刚在 plunkr 中创建了一个
哦，是的，它都是一个域的一部分，没有页面位于另一个域左右
能否请您将它集成到我的代码中？这样它就可以在 shades.html 和 name.html 中工作？
您正在隐藏图像，但我需要 iframe 或 iframe 所在的 div 隐藏
我更新了 plnkr 以隐藏整个 iframe。 plnkr.co/edit/cF4wW8WwZ9os1HiATLCF?p=preview 请研究它并在您的代码中集成解决方案

【解决方案2】：

一位朋友帮我解决了这个问题：

索引.html：

<HTML>
<HEAD>
  <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    function showDuck(){
      $('#dd').show();
      $('#overlayframe').show;
    }

    function hideDuck(){
      $('#dd').hide();
    }

  </script>
</HEAD>
    <BODY>
        <div style="display:block;position:absolute;top:20px;left:20px;z-index:997;">
            <iframe name="UBERFRAME" src="index2.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800; height:480; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
        </div>
        <div id="dd" name="dd" style="display:none;position:absolute;top:20px;left:20px;z-index:998;">
            <iframe id="overlayframe" name="OVERLAY" src="testframe.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800px; height:428px; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
        </div>

    </BODY>
</HTML>

index2 安然无恙

shades.html：

<HTML>

<BODY>

     <a href="#" onclick="javascript:window.parent.parent.showDuck(); return false;">
         show Donald Duck
     </a>

</BODY>

</HTML>

testframe.html:

<HTML>
  <BODY>
    <IMG SRC="http://img3.wikia.nocookie.net/__cb20130203061323/disney/images/6/6b/Donald_Duck_transparent.png" onclick="javascript:window.parent.hideDuck(); return false;">
  </BODY>
</HTML>

或http://plnkr.co/edit/x13V7l0qwv0jtI8IKXtf?p=info

【讨论】：