What is the problem in this JavaScript code?

Question

var urlname= '/a/b.php?company_name='+company_name+'&series='+series;
document.getElementById('frame2').innerHTML='<IFRAME HEIGHT="600px" WIDTH="100%" NORESIZE="NORESIZE" SRC="'+urlname+'" NAME="aol" FRAMEBORDER="0" ALIGN="ABSBOTTOM" scrolling="no" id="a1" name="a1" onload="Javascript:heights('a1')"></IFRAME>';

I'm using this code but the function heights() is not running and it's not showing any error too. What's the right syntax to call a function with arguments in JavaScript. I'm new to it so don't have much idea. Any help would be highly appreciated.

Answer 1

Where is the heights function located?

You need to escape the most inner quotes and remove "javascript:", eg replace onload="Javascript:heights('a1')" with onload="heights(\'a1\')"

Answer 2

check out with the url path you are given. try like this.

var urlname= './a/b.php?company_name='+company_name+'&series='+series;

And also escape the quotes

Javascript:heights(\'a1\')

Answer 3

You don't need JavaScript:heights onload="" is already scoped to execute JavaScript. You can try it with this: onload="alert('hello world')"

Answer 4

Adding strings together is not as easy as you think. You've got all sorts of problems here.

var urlname= '/a/b.php?company_name='+company_name+'&series='+series;

If company_name and series can have characters in that can't go in a URL parameter, like spaces or pluses or percents or ampersands or Unicode, this breaks. They need encoding.

innerHTML='<IFRAME HEIGHT="600px" WIDTH="100%" NORESIZE="NORESIZE"

You can't use 'px' units in HTML, that's CSS. noresize isn't needed, you can't resize iframes anyway.

SRC="'+urlname+'"

If urlname contains ", < or & you might have trouble. Needs to be HTML-encoded.

NAME="aol" FRAMEBORDER="0" ALIGN="ABSBOTTOM" scrolling="no" id="a1" name="a1"

You've got two names? That's invalid and will confuse anything trying to use the window.frames array or getElementsByName.

onload="Javascript:heights('a1')">

' needs backslash-escaping since you used that as the string delimiter in your innerHTML='...' assignment.

Don't begin an event handler with 'javascript:', that only makes sense in an href (and even then, javascript: URLs should never be used).

If you make your heights() function take an object instead of an id string, you can do away with all those names. And using DOM methods lets you avoid thinking about HTML-escaping. eg.:

function heights() {
    alert(this.offsetHeight); // 'this' is the object the event was called on
}

var iframe= document.createElement('iframe');
iframe.frameBorder=iframe.scrolling= 'no';
iframe.style.height= '600px';
iframe.style.width= '100%';
iframe.onload= heights;
iframe.src= '/a/b.php?company_name='+encodeURIComponent(company_name)+'&series='+encodeURIComponent(series);
document.getElementById('frame2').appendChild(iframe);