CODEWITHSUNDEEP
javascripthtmliframe
Joel DeWitt
Joel DeWitt

Reputation: 1306

Can I change the style of elements that are contained within an iframe that itself is contained in external HTML?

I have a navigation menu contained in an iframe that itself is pulled from an external file:

<iframe src="iframe.htm"></iframe>

The contents of iframe.htm:

<!DOCTYPE HTML>
<html>
  <head>
    <title>iframe</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a id="index" href="index.htm" target="_blank">Home</a></li>
        <li><a id="page01" href="page01.htm" target="_blank"> 1</a></li>
        <li><a id="page02" href="page02.htm" target="_blank"> 2</a></li>
        <li><a id="page03" href="page03.htm" target="_blank"> 3</a></li>
      </ul>
    </nav>
  </body>
</html>

The goal is provide user feedback by changing the background color and text color of the anchor of the page the user is currently visiting. So within iframe.htm for id="index" I can do:

<body onload="document.getElementById('index').style.backgroundColor = 'sandybrown'; document.getElementById('index').style.color = 'black'">

My question: Is it possible to access elements in an iframe (from the outside) that itself is contained in external HTML through JavaScript in a similar manner?

Upvotes: 1

Views: 72

Answers (2)

abeyaz
abeyaz

Reputation: 3164

Yes, you can (unless both pages are in same domain). You can use contentDocument property for example:

<iframe id="myFrame" src="iframe.htm"></iframe>
<script>
    var f = document.getElementById("myFrame");
    f.contentDocument.getElementById('index').style.backgroundColor = 'sandybrown';
</script>

Upvotes: 2

Shayan H.
Shayan H.

Reputation: 1

No, its not possible to add any styling through JS or CSS to iframe code.

Upvotes: -1

Related Questions