CODEWITHSUNDEEP
javascripthtml
Scott Hallauer
Scott Hallauer

Reputation: 389

How to change style of element in iFrame

The Problem:

I am designing a site which uses the same sidebar on all pages, so I put the sidebar in an iFrame for easy editing later... But on each page I want the current page link in the iFrame to be in bold font... Please could you help with a JavaScript statement or function that could to this.

My current code is as follows:

HTML (Main Webpage):

<!DOCTYPE html>
 <html>
  <head>
   <title>Example Page</title>
   <script type="text/javascript">
    var currentTag = function(tag){
     var currentPage = document.frames['tag_list'].document.getElementById(tag+'_tag-list'); currentPage.style.fontWeight = "bold";
    };
    currentTag("home")
   </script>
  </head>
  <body>
   <header>
    <!--All header code-->
   </header>
   <!--Sidebar (Problem)-->
   <iframe src="myframe.html" scrolling="no" id="tag_list">Your browser does not support the "iframe" element, please update...</iframe>
   <div id="content">
    <!--All content-->
   </div>
   <footer>
    <!--All footer code-->
   </footer>
  </body>
 </html>

HTML (iFrame):

<!DOCTYPE html>
<html>
 <head>
  <title>Sidebar Frame</title>
 </head>
 <body>
  <div id="tag_list">
   <h2>Pages</h2>
   <ul>
    <li><a href="#"><span id="home_tag-list">Homepage</span></a></li>
    <!--And all the other pages-->
   </ul>
  </div>
 </body>
</html>

Your help is much appreciated :D

Upvotes: 1

Views: 9600

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324710

Anything within the iframe can be access by accessing the iframe's contentWindow property, but only if the iframe's content is from the same origin as the parent window.

Once you're at contentWindow, access the element just like you would normally (document.getElementBy...)

Upvotes: 2

Related Questions