1

I want to load an HTML page into an iFrame with JS instead of using the usual iFrame target. Long story. That's just how I need it to be. My Javscript is

onclick = function buttonLife() {
    var el=document.getElementById("divContent");
    el.innerHTML="<iframe width=1024 height=702 scrolling=no name=bottomFrame frameborder=0 src=page.html></iframe>";
}

And my HTML is:

<a href="#" onclick="buttonLife();">BUTTON</a>;

And it works. But it loads a page already defined by the above java function. However, if I want to make the page I load into the iFrame variable for each button with the following HTML:

<a href="#" onclick="buttonLife('page2.html');">BUTTON2</a>

I know I need to change the have function to something like

onclick = function buttonLife() {
    var el=document.getElementById("divContent");
    el.innerHTML="<iframe width=1024 height=702 scrolling=no name=bottomFrame frameborder=0 src='link'></iframe>";
}

But it doesn't work. Help! Thanks

Ben Regenspan
  • 10,058
  • 2
  • 33
  • 44
JDPaulsen
  • 11
  • 5
  • I suggest trying to explain this question; it's been a while since it was asked, and while I've looked, I still don't know what it is that you want help with. Clicking the `a` element works, or doesn't work? If it doesn't work, what effect should it have; and how is it going wrong? It's worth looking at this article "[Writing the Perfect Question](http://msmvps.com/blogs/jon_skeet/archive/2010/08/29/writing-the-perfect-question.aspx)," by [Jon Skeet](http://stackoverflow.com/users/22656/jon-skeet), for pointers. – David Thomas Aug 21 '11 at 21:03
  • Not sure what part is not clear. Yes, as I said, it works. If what I want is to load a page determined by the Java function. That works. Then the very next sentence is "But it loads a page already defined by the above java function. However, if I want to make the page I load into the iFrame variable for each button..." – JDPaulsen Aug 21 '11 at 21:41

3 Answers3

2
  1. The function as you've created it doesn't accept any parameter; you're trying to pass it 'page2.html', but it doesn't expect this input.
  2. You're also expecting the link variable to be automatically interpolated, but Javascript does not interpolate variables in strings. The solution instead is to concatenate the variable with the strings.
  3. onclick = function buttonLife() probably does not do what you intend it to do; what it does is define a function, called buttonLife, and store it to a variable, called onclick. Instead you just want to create the function buttonLife().

Here's the function corrected to resolve the above issues:

function buttonLife( page ) {
    var el=document.getElementById("divContent");
    el.innerHTML="<iframe width=1024 height=702 scrolling=no name=bottomFrame frameborder=0 src='" + page + "'></iframe>";
}


<a href="#" onclick="buttonLife('page2.html');">BUTTON2</a>

MDN's guide to Javascript is a good basic introduction and will help you avoid these sorts of problems.

Ben Regenspan
  • 10,058
  • 2
  • 33
  • 44
0

So I took your code and tried it out in jsfiddle and it works fine: http://jsfiddle.net/ZK2VB/

I made the following changes:

  • Removed the pointless onclick =
  • Made it so you can pass the URL to the function in variable pageUrl
  • Removed href="#" to so when you click the links it doesn't move the page
  • I added the <div id="contentDiv">

But these are only cosmetic / to create the real-world implementation.

If you use the code as I am this should work, unless you have some other problem, like you redefined the function somewhere, or you're trying to call the function before it's defined.

Robin Winslow
  • 10,908
  • 8
  • 62
  • 91
0

Try this:

function buttonLife(page_url)
{
  var el = document.getElementById("divContent");
  el.innerHTML = "<iframe width=1024 height=702 scrolling=no name=bottomFrame frameborder=0 src=" + page_url + "></iframe>";
}


Also, I recommend you to use:

<a href="javascript:buttonLife('page1.html')">BUTTON</a>;
Victor
  • 5,493
  • 1
  • 27
  • 28
  • 1
    Use of `href="javascript:/* some js */"` is generally not recommended (e.g. http://stackoverflow.com/questions/1070760/javascript-function-in-href-vs-onclick). Choose JavaScript events instead. Also, the `javascript:` method can have other (probably undesired) consequences in IEs: http://www.velocityreviews.com/forums/t303342-href-javascript-func-vs-href-onclick-javascript-func.html#postmenu_1606021. – Robin Winslow Aug 21 '11 at 21:55
  • @Robin Winslow, Thanks for links. But anyway, I think href="javascript()" is good because users need to know that this link do (or where go). – Victor Aug 22 '11 at 21:02