WordPress嵌入iframe（3D菜单）跳转异常问题求助

1. 搞定URL不更新&同窗口跳转失效 #

iframe里的链接默认只在iframe内部跳转，所以外层页面URL不会变，target=_self也只是在iframe自己的窗口生效，根本影响不到父页面。解决办法分两种情况：

• 能改iframe内部代码的话，给所有菜单链接加个点击事件，强制跳转到父窗口：
  要么直接给链接加onclick属性：

  <a href="xxx" onclick="top.location.href=this.href;return false;">菜单标签</a>
  

  要么用JS批量绑定：

  document.querySelectorAll('.3d-menu-item a').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      window.top.location.href = this.href;
    });
  });
  

  把.3d-menu-item换成你菜单链接的实际类名。
• 没法改iframe内部代码的话，在WordPress的父页面加JS监听（注意：如果iframe和你的网站域名不一样，这个方法会因为跨域限制用不了）：

  const menuIframe = document.querySelector('iframe[src="你的3D菜单地址"]');
  menuIframe.contentWindow.document.addEventListener('click', function(e) {
    if (e.target.tagName === 'A') {
      e.preventDefault();
      window.location.href = e.target.href;
    }
  });
  

2. 解决3D菜单被内容盖住的问题 #

这就是CSS层级的锅，给iframe加个高优先级的z-index就行，不用改FTP文件，直接在WordPress后台「外观→自定义→额外CSS」里加：

iframe.your-3d-menu {
  position: relative;
  z-index: 9999;
}

把your-3d-menu换成你iframe的类名或者ID，要是不知道类名，直接给iframe加个class="your-3d-menu"就行。

3. 终极替代方案：弃用iframe #

如果跨域限制搞不定，干脆把3D菜单的HTML、CSS、JS代码直接复制到WordPress页面的自定义HTML区块里，这样菜单就是页面的一部分，链接自然会正常更新URL和跳转，层级问题也随便调，比iframe省心多了。

内容的提问来源于stack exchange，提问作者Laure Valery