javascript - 根据父 URL 更改 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>

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

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

值得注意的是，我试图将所有父页面上的困惑程度降至最低(因此首先使用 iframe)

谢谢!

Answer 1

噢，皮特，你在这里陷入了一个充满伤害的世界。您可能面临两种情况:

• iFrame 页面和您的页面位于同一域
• 它们位于不同的域

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

但是，如果目标文档和父文档位于不同的域中 - 是的，子域算作不同的域 - 您将需要做一些更激进和更黑客的事情。本质上，除了设置 URL 之外，您不能影响内部框架；您可以通过设置 URL 片段 ( http://www.foo.com/bar.php#fragment ) 将消息传递给框架中的脚本。 iFrame 内的脚本可以检查 URL 片段并根据需要更改 CSS 样式。可以找到一个很好的方法here,尽管它非常复杂 - 祝你好运。

尽管如此，使用 iFrame 很可能是错误的做法。您可以使用jQuery's ajax() family of methods将文档直接动态加载到您的文档中，其中 CSS 和 JavaScript 将正常与它们交互。这非常非常容易处理，而且在风格上更可取，并且启动时符合标准。