loading function via link in external file

**maxrok** · 07-02-2008, 02:53 AM

I need to run a onLoad JavaScript function in another file via link. I assume the function would reside in the destination file.
Something like that:

<a href="http://localhost8080/otherfile.html=onLoad:myfunction()">link</a>.

I would very much appreciate if any one could please help with the link syntax .

**jscheuer1** · 07-02-2008, 08:29 AM

Cross page scripting will generally only work on the same domain. To influence the behavior of one page from the page that opens it is really better suited to server side languages like asp or PHP, but can be done with javascript.

However, in either case you must have some control over the code on the 'receiving page', on both pages really, but I'm assuming you have control over your 'sending page'.

The way that information is passed with the link URL is basically identical though regardless of the method used to evaluate it on the 'receiving page':

Code:

<a href="http://localhost8080/otherfile.html?load=myfunction">link</a>

This will result in the address of the receiver page to appear in its window's address bar as:

http://localhost8080/otherfile.html?load=myfunction

Then on otherfile.html you could have:

Code:

<script type="text/javascript">
function getQval(n, m) {
/* n=name, m=searchString(optional) */
if(!arguments[0]||typeof n!='string')
return null;
var r=new RegExp('[?&;]'+n+'=([^&;#]*)'), m=arguments[1]?m:location.search;
return (m=r.exec(m))? unescape(m[1]) : null;
}

if(getQval('load') == 'myfunction')
window.onload=myfunction;
</script>

But if you were to use a server side language, you could use its $_GET to get the query data and then fetch an include file on that basis that has your script or simply your desired imported content on it.

**maxrok** · 07-02-2008, 04:01 PM

Thank you so much, John. This perfectly works, when I put alert into the function! (As for server side language this suppose to be JSP file)

However, if I put show/hide into the function it does not work. It seems the function does not get into onload event. If I hard code it <body onload="myfunction1()"> then it works. What am I doing wrong? That's what I have:

first file:
<body>
<a href="otherfile.html?load=myfunction1()">Display Content 1</a>
<a href="otherfile.html?load=myfunction2()">Display Content 2</a>
</body>

second file:
<script type="text/javascript">
function myfunction1() {
document.getElementById('Content1').style.display = 'block';
document.getElementById('Content2').style.display = 'none'; }

function myfunction2() {
document.getElementById('Content2').style.display = 'block';
document.getElementById('Content1').style.display = 'none'; }

function getQval(n, m) {
/* n=name, m=searchString(optional) */
if(!arguments[0]||typeof n!='string')
return null;
var r=new RegExp('[?&;]'+n+'=([^&;#]*)'), m=arguments[1]?m:location.search;
return (m=r.exec(m))? unescape(m[1]) : null; }

if(getQval('load') == 'myfunction1()')
window.onload=myfunction1();
if(getQval('load') == 'myfunction2()')
window.onload=myfunction2();
</script>
</head>

<body>
Content 1Content 2

**jscheuer1** · 07-02-2008, 05:51 PM

This will never work:

Code:

window.onload=myfunction1();

You don't really need to pass the () with the function name, ex:

Code:

<a href="otherfile.html?load=myfunction1">

and test it like:

Code:

if(getQval('load') == 'myfunction1')

Finally, in execution, you cannot use it:

Code:

window.onload=myfunction1;

unless you do it like so:

Code:

window.onload=function(){myfunction1();};

That's just the way assigning events works, and has nothing to do with passing the value. In other words, this will work:

Code:

window.onload=myfunction1;

this will not:

Code:

window.onload=myfunction1();

**maxrok** · 07-03-2008, 02:50 AM

Wow! This works perfectly now: pretty amazing trick. Thank you so much! I'll leave the coplete code in case someone needs it:

first file
<body>
<a href="otherfile2.html?load=myfunction1">Display Content 1</a>
<a href="otherfile2.html?load=myfunction2">Display Content 2</a>

otherfile2.html
<script type="text/javascript">
function myfunction1() {
document.getElementById('Content1').style.display = 'block';
document.getElementById('Content2').style.display = 'none';
}

function myfunction2() {
document.getElementById('Content2').style.display = 'block';
document.getElementById('Content1').style.display = 'none';
}

function getQval(n, m) {
/* n=name, m=searchString(optional) */
if(!arguments[0]||typeof n!='string')
return null;
var r=new RegExp('[?&;]'+n+'=([^&;#]*)'), m=arguments[1]?m:location.search;
return (m=r.exec(m))? unescape(m[1]) : null;
}

if(getQval('load') == 'myfunction1')
window.onload=function(){myfunction1();};
if(getQval('load') == 'myfunction2')
window.onload=function(){myfunction2();};
</script>
</head>

<body>
Content 1Content 2

Thread: loading function via link in external file

Thread Tools

Search Thread

loading function via link in external file

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions