根据父级网址在iframe中更改属性的颜色

Question

基本上，我有一个iframe可以加载到我网站的每个页面上。 内部是带有使用<ul>和<li>标记编码的导航栏的标头。 例如。

<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>

当标题加载到其各自的页面时，我需要更改<a>属性的背景颜色。 我到目前为止最接近的就是使用这个。

在父页面上：

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

在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>

如果变量“ URL”匹配并且父页面成功将document.URL存储到“ URL”变量中，则iframe中的代码会成功更改<a>属性的颜色，但似乎该变量无法被访问iframe。

我敢肯定有一个很好的方法可以做到这一点，但是我已经没有足够的想法了

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

谢谢！

Answer 1

Oof，Pete，您在这里充满了痛苦。 您有两种可能的情况：

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

如果它们在同一域中，则应该能够使用此处概述的方法通过JavaScript访问内部框架，反之亦然。 令人讨厌，但可行。

但是，如果目标文档和父文档位于不同的域上（是的， 子域被视为不同的域） ，那么您将需要做一些更具侵略性和hacky的事情。 本质上，除了设置URL外，您不能影响内部框架。 您可以通过设置URL片段（ http://www.foo.com/bar.php#fragment ）将消息传递到框架中的脚本。 iFrame中的脚本可以检查URL片段并根据需要更改CSS样式。 一个很好的方法可以在这里找到，尽管它非常复杂-祝您好运。

综上所述，很有可能使用iFrame是错误的选择。 您可以使用jQuery的ajax（）系列方法将文档动态地直接加载到您的文档中，CSS和JavaScript将在其中正常进行交互。 这非常容易处理，并且在样式上更可取，并且符合引导标准。