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

Oof，Pete，你在这里受伤了。你有两种可能的情况：

iFrame'd页面和您的页面位于同一个域
他们在不同的域名

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

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

所有这一切，使用iFrame的可能性很大。您可以使用jQuery's ajax() family of methods将文档直接动态加载到文档中，其中CSS和JavaScript将照常与其进行交互。这很多，很多更容易处理，并且在风格上更受欢迎，并且标准兼容引导。

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

1 个答案: