1

Basically, I have an iframe which loads on every page on my website. Inside this is a header with a navigation bar coded using <ul> and <li> tags. eg.

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

I need to change the background colour of an <a> attribute when the header is loaded into its respective page. The closest I've got so far is by using this..

On the parent page:

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

and in the 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>

The code in the iframe successfully changes the colour of the <a> attribute if the variable 'URL' is matched up and the parent page sucessfully stores document.URL into the 'URL' variable but it seems like the variable isn't accessible by the iframe.

I'm sure there is a good way of doing this but I've run out of ideas

It's worth noting that I'm trying to keep clutter to a minimum on all the parent pages (hence the use of iframes in the first place)

Thank you!

pd93
  • 666
  • 1
  • 7
  • 15
  • Is the iframe the same domain as the parent page? If not, then you can't share javascript variables between them. If they are the same, you can directly share varaibles. – jfriend00 Aug 15 '12 at 03:22

1 Answers1

0

Oof, Pete, you're in for a world of hurt here. There are two possible situations you're in:

  • The iFrame'd page and your page are on the same domain
  • They are on different domains

If they're on the same domain, you should be able to access the inner frame via JavaScript, and vice-versa, by using the methods outlined here. Obnoxious, but doable.

However, if the target and parent documents are on different domains - and yes, subdomains count as different domains - you'll need to do something more aggressive and hacky. Essentially, you can't affect the inner frame except to set the URL; you can pass messages to a script in the frame by setting a URL fragment (http://www.foo.com/bar.php#fragment). A script inside the iFrame can check for URL fragments and change the CSS styles as needed. A good method for doing that can be found here, though it's very complex - good luck.

All that said, there's a very good chance that using an iFrame is the wrong thing to do. You can use jQuery's ajax() family of methods to dynamically load documents directly into your document, where CSS and JavaScript will interact with them as normal. This is much, much, much easier to deal with as well as being stylistically preferable, and standards-compliant to boot.

Community
  • 1
  • 1
Winfield Trail
  • 5,535
  • 2
  • 27
  • 43
  • They are on the same domain and I've solved the issue by simply changing the code in the iframe to have "parent.URL.indexOf....etc" This accesses the variable stored in the parent page – pd93 Aug 15 '12 at 03:40
  • Yep, that's one of the techniques outlined in the first link I provided. Be careful, though, as browser support varies. Even if it works now, it may not always - and the more complex your parent-child interactions, the greater the chance of bizarre compatibility issues. – Winfield Trail Aug 15 '12 at 03:48
  • Thanks for the help! :) I've now read that link. Helped me understand the whole thing a lot better – pd93 Aug 15 '12 at 05:17