By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,130 Members | 2,228 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,130 IT Pros & Developers. It's quick & easy.

Calling JS function from within iframe tag

P: n/a
I'm new to Javascript and to html and am trying to make the following
code snippet work but it doesn't. It refuses to call the getPage()
function and I always get a 404 error. I know the code is getting as
far as the iframe section as other parts of the html code work
correctly. But
it is not executing any code within the getPage() function as some
"hello world" writes within getPage() wouldn't print.

-----------------------------------------------------------------------------------
..
..
..

<script language="javascript" type="text/javascript">

function getPage() {
<!--
.... some code here
return pageURL;
//-->
}
</script>
</head>

<body>
<iframe src="getPage()" name="whatever" width=100% height=600
frameborder="0" scrolling="yes"> </iframe>
..
..
..
-------------------------------------------------------------------------------

Can anyone help what the syntax error is here, or what I am trying
to do is not possible? Thanks and please no flames.

Dec 2 '05 #1
Share this Question
Share on Google+
13 Replies


P: n/a

ukrbend wrote:
I'm new to Javascript and to html and am trying to make the following
code snippet work but it doesn't. It refuses to call the getPage()
function and I always get a 404 error. I know the code is getting as
far as the iframe section as other parts of the html code work
correctly. But
it is not executing any code within the getPage() function as some
"hello world" writes within getPage() wouldn't print.

-----------------------------------------------------------------------------------
.
.
.

<script language="javascript" type="text/javascript">
The language is deprecated and unnecessary. The type attribute will
suffice.
function getPage() {
<!-- [...] //-->
Why do you have html comment tags inside your function? That is
definitely an error. Remove those immediately.
<iframe src="getPage()"></iframe>


You are incorrectly using the src attribute. The value of the src
attribute should be the URL of the document to show in the iframe.

Try the following instead since you are just beginning:

After you fix the above mentioned errors, create a second html, call it
pageTwo.html. Afterwards, move your javascript into pageTwo.html. To
invoke the function call, place the following somewhere in the body:

<script type = "text/javascript">
getPage();
</script>

And finally, for your iframe in your pageOne.html, change the value of
the src to be as follows:

<iframe src = "pageTwo.html"></iframe>

Dec 2 '05 #2

P: n/a
Thanks for the reply. Regarding some of your points, why are the html
comment tags there? They are there in case the user has an older
browser that doesn't support javascript. Several examples of this can
be found here:

http://www.prestwood.com/community/w...ns/beg_js.html
http://www.engin.umd.umich.edu/CIS/c...pt/hellow.html
http://www.webreference.com/js/scripts/basic_date/

Second, you said the src attribute should be the URL of the document to
show in the iframe. That is exactly what the getPage() function
returns. I know it getPage() works correctly since I've tried calling
it not in the iframe tag. It seems to me one of two things can be
wrong. One, that html doesn't allow you to call a javascript function
if it's in the context of a value of a property. Or two, there is some
syntax error that I am introducing in the way I am calling the
function. I have tried several variation (i.e. no quotes, single
quotes, etc...), but so far haven't hit upon it.
But thanks for the help, I will try your solution.

Dec 2 '05 #3

P: n/a
Found the answer, it should be this:

<iframe src="javascript:getPage()" .....

Dec 2 '05 #4

P: n/a

ukrbend wrote:
Thanks for the reply. Regarding some of your points, why are the html
comment tags there? They are there in case the user has an older
browser that doesn't support javascript. Several examples of this can
be found here:

http://www.prestwood.com/community/w...ns/beg_js.html
http://www.engin.umd.umich.edu/CIS/c...pt/hellow.html
http://www.webreference.com/js/scripts/basic_date/


The articles you point out are correct. However, some will argue that
there are no longer browsers that do not understand the script tag.

Secondly, I do agree with you. Perhaps what I said was a little harsh.
It's not erroneous, however it is inefficient for you to place html
comment tags there. Consider the following, lets say that you do come
across a browser that doesn't support javascript. What happens then?
Only the areas you have not commented will show up as plain text in the
browser. The better way (as shown in the articles you've given me), is
to place the comment tags around the entire script like so:

<script type = "text/javascript">
<!--
....javascript code...
//-->
</script>

Dec 2 '05 #5

P: n/a

ukrbend wrote:
Found the answer, it should be this:

<iframe src="javascript:getPage()" .....


As for the above, I won't explain what's wrong with the use of the
javascript pseudo protocol. Just simply search the group on
"javascript pseudo protocol" and you'll get many postings about its bad
usage.

http://groups.google.com/group/comp....t=0&scoring=d&

Dec 2 '05 #6

P: n/a
ukrbend wrote:
Thanks for the reply. Regarding some of your points, why are the html
comment tags there? They are there in case the user has an older
browser that doesn't support javascript. Several examples of this can
be found here:

http://www.prestwood.com/community/w...ns/beg_js.html
URL's should be enclosed in <URL: > to help news readers identify them.
It is often recommended to leave a space either side of the URL to
help with copy/paste:

<URL:
http://www.prestwood.com/community/w...ns/beg_js.html
http://www.engin.umd.umich.edu/CIS/c...pt/hellow.html
That link dates from 1997, when script comments were useful.

http://www.webreference.com/js/scripts/basic_date/
You can find thousands of examples of inappropriate and bad programming
with little effort, that doesn't make it recommended best practice. The
answer to your question is given here:

<URL:
http://groups.google.com/group/comp....362c56072adb53
In case you don't currently have access to the web, here's the relevant
quote:

"Your reference is outdated. The `script' element was introduced
along with the `style' element in HTML 3.2 (1997). Versions of HTML
prior to that have been obsoleted by RFC2854 (June 2000), so there
is no need for trying to hide anything. No conforming user agent
will parse this content as PCDATA, especially it must not be
displayed if found within the `head' element. And in contrast of
such "comments" within CSS, they have never been specified for
JS/ECMAScript, hence using them in such script code is potentially
harmful; this includes, but is not restricted to, use in XHTML
(where an XML parser is allowed to remove all markup comments
before building the parse tree)."


Second, you said the src attribute should be the URL of the document to
show in the iframe. That is exactly what the getPage() function
returns.


You discovered how to use of the javascript pseudo-protocol in the src
attribute, but such use is discouraged. Anyone without script support
(because either their UA doesn't support it or they've disabled it) will
see an empty iframe or perhaps get an error message.

One technique is to write the iframe tag using script, so scriptless
browsers will not see the iframe element at all, e.g.

<script type="text/javascript">
document.write(
'<iframe src="somepage.html" name="whatever" width="100%"',
' height=600 frameborder="0" scrolling="yes"><\/iframe>'
);
</script>
You should always quote HTML attribute values. It isn't always
necessary, but it's good practice (it's recommended by in the HTML 4
specification). Where the attribute contains a percentage symbol '%',
it *must* be enclosed in quotes.

<URL: http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.2.2 >
Another method is to use a default scr attribute then modify it with
script so at least scriptless browsers display something useful, even if
it's just a page saying that something would have been displayed but
script support is needed to display it, e.g.:

<iframe src="defaultPage.html" name="whatever" width="100%"
height="600" frameborder="0" scrolling="yes"></iframe>

<script type="text/javascript">
var x, y;
if( (x=document.frames) && (x=x.whatever) {
if((y=getPage()){
x.src = y;
}
}
</script>
Untested, but illustrates the method.

[...]
--
Rob
Dec 2 '05 #7

P: n/a
VK

RobG wrote:
One technique is to write the iframe tag using script, so scriptless
browsers will not see the iframe element at all, e.g.

<script type="text/javascript">
document.write(
'<iframe src="somepage.html" name="whatever" width="100%"',
' height=600 frameborder="0" scrolling="yes"><\/iframe>'
);
</script>


For what it worth to mention Netscape 4.x had (has) "JavaScript
entities" one could use for attribute values. Sometimes I'm wondering
why this very useful shortcut for document.write did not go...
So say in the last century :-) the OP's HTML code could look like:

<iframe src="="&{getPage()};"
name="whatever"
width=100% height=600
frameborder="0" scrolling="yes"></iframe>

(Standard named entity syntacs &...; and JavaScript statement in curled
braces).
But this is the end of 2005 and no one known browser supports it.

src expects a string and it takes nothing but string. Even if you put
....src="javascript:getPage();"... it doesn't help because the src just
gets this exact combination of letters: "javascript:getPage()" - no
evaluation, no analyzing

Dec 3 '05 #8

P: n/a
VK wrote:
RobG wrote:
One technique is to write the iframe tag using script, so scriptless
browsers will not see the iframe element at all, e.g.

<script type="text/javascript">
document.write(
'<iframe src="somepage.html" name="whatever" width="100%"',
' height=600 frameborder="0" scrolling="yes"><\/iframe>'
);
</script>

For what it worth to mention Netscape 4.x had (has) "JavaScript
entities" one could use for attribute values. Sometimes I'm wondering
why this very useful shortcut for document.write did not go...


I don't see much point in referring to proprietary extensions in dead
browsers. Regardless, the advice would have been the same: depending on
script support to provide essential information for the tag to be useful
is a bad idea.
[...]
src expects a string and it takes nothing but string. Even if you put
...src="javascript:getPage();"... it doesn't help because the src just
gets this exact combination of letters: "javascript:getPage()" - no
evaluation, no analyzing


Yes, I didn't mention that.

However the OP discovered that regardless of what the HTML 4 spec says
(I suspect it wasn't used as a reference), the javascript
pseudo-protocol 'works' in the iframe src attribute for some browsers.
That it doesn't conform to the HTML 4 specification and that it doesn't
work in some browsers are more good reasons in support of the argument. :-)
--
Rob
Dec 3 '05 #9

P: n/a
Here's another solution, better?

<script>
var pageURL = getPage();
document.write("<iframe src=\"",pageURL,"\""," width=100%
height=600 frameborder=\"0\" scrolling=\"yes\"> ","</iframe>");
</script>

Dec 3 '05 #10

P: n/a
web.dev wrote:
Secondly, I do agree with you. Perhaps what I said was a little harsh.
It's not erroneous, however it is inefficient for you to place html
comment tags there. [...]

<script type = "text/javascript">
<!--
...javascript code...
//-->
</script>


It is hardly inefficient (9 bytes more or less hardly count), but it is
erroneous, at least error-prone. It is assuming that either markup parsers
are broken, not considering the content of the `script' element to be CDATA
(in HTML) or PCDATA (in XHTML), or that script engines are broken, ignoring
the operators `<', `!', and `--' if they are used in the first line of
source code and/or in that order without whitespace between them.
PointedEars
Dec 3 '05 #11

P: n/a
ukrbend wrote:
Here's another solution, better?

<script>
var pageURL = getPage();
document.write("<iframe src=\"",pageURL,"\""," width=100%
height=600 frameborder=\"0\" scrolling=\"yes\"> ","</iframe>");
</script>


No. In what way do you consider that to be better than RobG's suggestion?
The above is not even Valid HTML.
PointedEars
Dec 3 '05 #12

P: n/a
RobG wrote:
VK wrote:
RobG wrote:
One technique is to write the iframe tag using script, so scriptless
browsers will not see the iframe element at all, e.g.

<script type="text/javascript">
document.write(
'<iframe src="somepage.html" name="whatever" width="100%"',
' height=600 frameborder="0" scrolling="yes"><\/iframe>'
);
</script>

For what it worth to mention Netscape 4.x had (has) "JavaScript
entities" one could use for attribute values. Sometimes I'm wondering
why this very useful shortcut for document.write did not go...


I don't see much point in referring to proprietary extensions in dead
browsers.


IBTD. Netscape 4.x is very much alive, and Netscape 4.8 (1998) is quite
stable. Development and support has discontinued, but it is still used
on a considerable number of computers. For example, it is on machines
of universities' computer centers (although Mozilla Suite and Firefox
are winning bits every nanosecond :)), and some private users prefer slim
Netscape 4 Communicator instead of Firefox and Thunderbird or Mozilla
Suite.
Regardless, the advice would have been the same: depending on
script support to provide essential information for the tag to
be useful is a bad idea.


If Netscape 4.x did not have the Run-Length bug (I have not yet tested if it
is still in 4.8 which was considered a bugfix release of 4.79), client-side
scripting would indeed turn out to be useful here as NN4 does not support
the `iframe' element (that goes for my NN4.8/Linux as well), it supports
`<ilayer>...</ilayer>' IIRC.
PointedEars
Dec 3 '05 #13

P: n/a
ukrbend wrote:
Here's another solution, better?

<script>
The type attribute is required:

<script type="text/javascript">

var pageURL = getPage();
For truly robust code, a check should be made to ensure that getPage()
was available and actually returned something useful:

e.g.
var pageURL
if ( 'function' == typeof getPage
&& (pageURL = getPage()) // Note assignment '='
&& 'string' == typeof pageURL )
{
// use pageURL
}

document.write("<iframe src=\"",pageURL,"\""," width=100%


For typical use, the extra global variable can be removed and the test
simplified provided it is tested thoroughly:

if( 'function' == typeof getPage ){
document.write('<iframe src="' + getPage() + '"'
+ ...
}

Attribute values should always be quoted (as advised previously):

"By default, SGML requires that all attribute values be delimited
using either double quotation marks (ASCII decimal 34) or single
quotation marks (ASCII decimal 39)...

"In certain cases [in HTML], authors may specify the value of an
attribute without any quotation marks. The attribute value may only
contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal
45), periods (ASCII decimal 46), underscores (ASCII decimal 95), and
colons (ASCII decimal 58). We recommend using quotation marks even
when it is possible to eliminate them."

<URL: http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.2.2 >

An attribute value that has a percentage character '%' *must* be quoted.

I prefer to use double quotes inside single quotes rather than escaping
double inside double:

<script type="text/javascript">
if ( 'function' == typeof getPage ) {
document.write(
'<iframe src="' + getPage() + '"'
+ ' name="whatever" width="100%" height="600"'
+ ' frameborder="0" scrolling="yes"> </iframe>'
);
}
</script>
--
Rob
Dec 3 '05 #14

This discussion thread is closed

Replies have been disabled for this discussion.