Javascript 根据父URL更改iframe中属性的颜色

基本上，我有一个iframe，它加载到我网站的每个页面上。这里面是一个标题，带有使用

和

标签编码的导航条。例如

<div id="header">   
  <ul>
    <li><a id="BtnHome" href="/home">Home</a></li>
    <li><a id="BtnServices" href="/services">Services</a></li>
    <li><a id="BtnProducts" href="/products">Products</a></li>
    <li><a id="BtnAbout" href="/about">About Us</a></li>
    <li><a id="BtnBlank" href="#">Something</a></li>
  </ul>
</div>

当标题加载到相应页面时，我需要更改

属性的背景颜色。到目前为止，我得到的最接近的方法是使用这个

在父页面上：

<script type="text/javascript">
  var URL = document.URL;
  URL = URL.toUpperCase();
</script>

var URL=document.URL；
URL=URL.toUpperCase（）；

在iframe中：

<script type="text/javascript">
  if (URL.indexOf("/HOME") != -1) {document.getElementById("BtnHome").style.backgroundColor="#222";}
  if (URL.indexOf("/SERVICES") != -1) {document.getElementById("BtnServices").style.backgroundColor="#222";}
  if (URL.indexOf("/PRODUCTS") != -1) {document.getElementById("BtnProducts").style.backgroundColor="#222";}
  if (URL.indexOf("/ABOUT") != -1) {document.getElementById("BtnAbout").style.backgroundColor="#222";}
</script>

if（URL.indexOf（“/HOME”）！=-1{document.getElementById（“BtnHome”）.style.backgroundColor=“#222”}
if（URL.indexOf（“/SERVICES”）！=-1{document.getElementById（“BtnServices”）.style.backgroundColor=“#222”；}
if（URL.indexOf（“/PRODUCTS”）！=-1{document.getElementById（“BtnProducts”）.style.backgroundColor=“#222”；}
if（URL.indexOf（“/ABOUT”）！=-1{document.getElementById（“BtnAbout”）.style.backgroundColor=“#222”}

如果变量“URL”匹配并且父页面成功地将

document.URL

存储到“URL”变量中，则iframe中的代码成功更改

属性的颜色，但iframe似乎无法访问该变量

我相信有一个很好的方法可以做到这一点，但我已经没有主意了

值得注意的是，我正试图将所有父页面上的混乱程度降至最低（因此首先使用iframe）

---

谢谢大家!

噢，皮特，你在这里会受伤的。您可能处于两种情况：

• iFrame的页面和您的页面位于同一个域中
• 他们在不同的领域

如果它们在同一个域上，那么您应该能够通过JavaScript访问内部框架，反之亦然，通过使用上面列出的方法来访问内部框架是令人讨厌但可行的

但是，如果目标文档和父文档位于不同的域上—是的，子域被视为不同的域—则需要执行更具攻击性和黑客性的操作。本质上，除了设置URL，您不能影响内部框架；您可以通过设置URL片段（）将消息传递给框架中的脚本。iFrame中的脚本可以检查URL片段，并根据需要更改CSS样式。我们可以找到一个很好的方法，尽管它非常复杂——祝你好运

---

综上所述，使用iFrame很有可能是错误的。您可以使用将文档直接动态加载到文档中，CSS和JavaScript将正常地与它们交互。这非常非常，非常易于处理，而且在风格上更可取，并且符合引导标准。

iframe与父页面是同一个域吗？如果没有，则不能在它们之间共享javascript变量。如果它们相同，您可以直接共享变量。它们位于同一个域中，我通过简单地将iframe中的代码更改为“parent.URL.indexOf…etc”解决了这个问题。这访问存储在parent pageYep中的变量，这是我提供的第一个链接中概述的技术之一。不过，要小心，因为浏览器支持各不相同。即使它现在起作用，也可能不总是如此——而且你的亲子互动越复杂，出现奇怪的兼容性问题的可能性就越大。谢谢你的帮助！：）我现在已经阅读了这个链接。帮助我更好地理解了整件事