javascript - Iframe ContentWindow 根据 Iframe 源显示/隐藏元素

Question

基于 Iframe 源 Plnkr.co 示例代码的 Iframe ContentWindow 显示/隐藏元素：https ://plnkr.co/plunk/yv5HLC4TxB3ql8XU

当 iframe 源 ContentWindow 源不是初始 iframe 源时，我试图显示“aside”元素。我尝试了 StackOverflow 中描述的许多方法，但没有一个对我有用。在我的 plnkr.co 示例中，我有一个带有两个 iframe（iframeone.html、iframetwo.html）的主 index.html 页面。iframeone.html 的内容由指向两个页面（betaOne.html、betaTwo.html）的链表组成。用户可以从这些 betaOne / betaTwo 页面中的任何一个返回到 iframeone.html。iframe 的 contenWindow 是 betaOne 或 betaTwo 我希望 'aside' 元素可见。当 iframe 的 contentWindow 是初始的 'iframeone.html' 时，我想隐藏 'aside' 元素。

我的 javascript 示例：''' function evaluation(){ var iframesource = document.getElementById("iframeOne").src;

    alert('From within Document.ready.') // using this to ensure that my external js file is being accessed.
    if(iframesource.includes('iframeone.html')){
        alert('internal alert YES');
        document.getElementById('asideMenu').style.display = 'none';
    }else{
        alert('internal alert NO');
        //$("asideMenu").css('visibility') = 'visible';
        document.getElementById('asideMenu').style.display = 'block';
    }
}

'''

标签： javascriptiframe

Answer 1

这对我有用：

function evaluation(){

  var iframeoneContentWindow = document.getElementById('contentFrame').contentWindow;
  alert(iframeoneContentWindow.document.URL + 'External Script Alert');

  if(iframeoneContentWindow.document.URL.includes('body_ros')){
      alert('internal alert YES');
      document.getElementById('contentSide').style.display = 'none';
  }else{
      alert('internal alert NO');

      document.getElementById('contentSide').style.display = 'block';
  }

}