1

基本上，我有一个 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”匹配并且父页面成功存储到“URL”变量中，则 iframe 中的代码成功更改<a>属性的颜色，document.URL但 iframe 似乎无法访问该变量。

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

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

谢谢！

4

1 回答 1

0

哎呀，皮特，你在这里是一个受伤的世界。你有两种可能的情况：

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

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

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

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

于 2012-08-15T03:30:22.937 回答