CODEWITHSUNDEEP
javascripthtmliframesrc
JamEngulfer
JamEngulfer

Reputation: 747

Issues changing the source of an iframe from another iframe embedded in the same page

I have two iFrames embedded into a single parent page. One is a navigation bar and the other is the content frame.

I need to change the source of the content frame using buttons inside the navigation frame, however I am finding this very difficult to acheive at the moment and I don't know why.

Here is the body source for the parent page:

<body>

<script type="text/javascript">

var links = [
'secondary.html',
'default.html'
];
var one, two;
window.onload=function() {
  one = document.getElementById('content');
  two = document.getElementById('content');
} 

function onenav(idx) {
    one.src=links[idx];
}

function twonav(idx) {
two.src=links[idx];
}

</script>
<iframe src='sidebar.html' name='sidebar' scrolling="yes" height="600" width="250"     seamless="seamless" frameborder="1" align="left">
</iframe>

<iframe src='default.html' name='content' scrolling="yes" height="600" width="800" seamless="seamless" frameborder="1" align="left"></iframe>

</body>

This is the source of the sidebar page:

<button onclick="parent.onenav(0)">Secondary</button>
<button onclick="parent.twonav(1)">Default</button>

The content frame has no relavant html code.

Upvotes: 0

Views: 1218

Answers (1)

eyecatchUp
eyecatchUp

Reputation: 10560

You missed the id attribute for the iframe. use

<iframe src='default.html' id="content" name='content' scrolling="yes" height="600" width="800" seamless="seamless" frameborder="1" align="left"></iframe>

and it works.

Upvotes: 2

Related Questions