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

基本上，我在我的网站上的每个页面上加载了一个iframe。里面是一个标题，其导航条使用<ul>和<li>标签进行编码。例如。根据父母URL更改iframe中某个属性的颜色URL

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

谢谢！

来源

2012-08-15 pd93

iframe是否与父页面位于同一个域？如果没有，那么你不能在它们之间共享javascript变量。如果他们是一样的，你可以直接分享varaibles。 – jfriend00 2012-08-15 03:22:56

Oof，Pete，你在这里遇到了一个受到伤害的世界。有你在是两种可能的情况：

的iFrame'd网页和你的网页在同一域
他们是不同的域

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

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

所有这一切说，使用iFrame是一个很好的机会是错误的事情。您可以使用jQuery's ajax() family of methods将文档直接动态加载到文档中，CSS和JavaScript将像平常一样与它们交互。这非常多，很多更容易处理，以及在风格上更可取，并符合标准以启动。

来源

2012-08-15 03:30:22

它们位于同一个域中，我通过简单地将iframe中的代码更改为“parent.URL.indexOf ....”来解决此问题。等等“这是访问存储在父页面 – pd93 2012-08-15 03:40:15

中的变量，这是我提供的第一个链接中概述的技术之一，但请注意，因为浏览器支持各不相同，即使它现在有效，它可能并不总是 - 而且更复杂的亲子互动，奇怪的兼容性问题的机会越大。 – 2012-08-15 03:48:45

感谢您的帮助！:)我现在已经阅读了该链接，帮助我更好地理解了整个事情 – pd93 2012-08-15 05:17:54

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

回答

相关问题