iframe 点击使 div 显示隐藏

Question

我有一个 iframe，它打开一个包含三个链接的页面。

我想在其中一个链接上显示 div。请提出建议。

这是我的代码：

<div id="divTest" runat="server" >
    this is a test div          // Hide this div
</div>

<div class="inner-ca" style="width: 981px;">
    <div class="main" style="width: 932px;">
        <div id="page_FAQ">
            <a href="LocatorDefault.aspx" runat="server" style="float: right; margin-top: 30px; margin-right: 4px; text-decoration: underline; color: #666;" target="_blank">To have a full view click here</a>
            <h2>Locate Us</h2>
            <div class="box1_bot">
                <div class="box1_left">
                    <div class="box1_right">
                        <div class="box1" style="border:0px;">
                            <iframe src="Default.aspx" width="100%" height="675" style="position: relative;"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

请建议..!!!

Answer 1

Plain JS 假设两个页面来自同一来源。 我给了 iFrame 一个 ID 和一个 onload

Working example

function assignHandler() {
  var ifr = document.getElementById("iframe1");
  var iframeDocument = ifr.contentDocument || ifr.contentWindow.document;
  var links=iframeDocument.getElementsByTagName("a");
  for (var i=0;i<links.length;i++) {
    links[i].onclick=function() {
      var div = parent.document.getElementById("divTest");
      if (div) div.style.display=this.href.indexOf("Locker")!=-1?"block":"none";
      return false; // remove when link is needed
    }
  }  
}