Calling JS function in another page

Page 1 of 1

3 Replies - 6646 Views - Last Post: 11 March 2010 - 12:27 AM

#1 mumeisyuu  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 55
  • Joined: 03-October 08

Calling JS function in another page

Posted 10 March 2010 - 10:17 PM

Hi all,

I am wondering how could I call a function on a separate page from another page; I know if you want to call a function you write something like this:
<a href="javascript:myFunc()" target="my_frame">Click Me!</a>


But what I wanted to do is, says I have two pages: page1.html and page2.html, and in page2.html I have a few JS functions namely myFunc1(), myFunc()2 and myFunc3(). Then I am inserting a few links in page1.html with an iframe below all the links with the name="my_frame", and what I want to do now is for the 3 <a> links I want to open up page2.html into the iframe (e.g. <a href="page2.html" target="my_frame">open Func 1</a>) but also when the page is loaded, one of those 3 functions would be invoked correspondingly depending on which link on page1.html I clicked.

I am just wondering how should I get this done?
Many thanks~ :D

This post has been edited by mumeisyuu: 10 March 2010 - 10:17 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Calling JS function in another page

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3877
  • View blog
  • Posts: 11,416
  • Joined: 18-April 07

Re: Calling JS function in another page

Posted 10 March 2010 - 10:49 PM

You can access the javascript functions on the page loaded into your iframe by giving the frame an id and then using that id to access the functions. Assume I have an iframe with the id "myframe" I can then access its myFunc3() function using...

document.getElementById("myframe").contentwindow.myFunc3();


This is cross browser compatible and accesses the iframe using its id, gets its contentWindow and uses that object to call its myFunc3() function you have defined in the page.

Hope that is what you were looking to do. Good luck to you.


"At DIC we be iframe referencing code ninjas, just be careful when referencing into other types of windows or the cops will arrest you for peeping." :snap:
Was This Post Helpful? 0
  • +
  • -

#3 mumeisyuu  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 55
  • Joined: 03-October 08

Re: Calling JS function in another page

Posted 11 March 2010 - 12:02 AM

View PostMartyr2, on 10 March 2010 - 09:49 PM, said:

You can access the javascript functions on the page loaded into your iframe by giving the frame an id and then using that id to access the functions. Assume I have an iframe with the id "myframe" I can then access its myFunc3() function using...

document.getElementById("myframe").contentwindow.myFunc3();


This is cross browser compatible and accesses the iframe using its id, gets its contentWindow and uses that object to call its myFunc3() function you have defined in the page.

Hope that is what you were looking to do. Good luck to you.


"At DIC we be iframe referencing code ninjas, just be careful when referencing into other types of windows or the cops will arrest you for peeping." :snap:


Thanks for the solution, then just one question~
does the document.getElementById("myframe").contentWindow means returning the content of what is loaded and displayed by the iframe? So say if I then change to page3.html then still I can call functions in page3.html in the same way?

Many thanks again :D
Was This Post Helpful? 0
  • +
  • -

#4 mumeisyuu  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 55
  • Joined: 03-October 08

Re: Calling JS function in another page

Posted 11 March 2010 - 12:27 AM

I just attempted something like this:

iframe_Test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

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

function loadPage()
{
	document.getElementById("display_frame").src = "iframe_Test_2.html";
	document.getElementById("display_frame").contentwindow.myFunc();
}

window.onload = loadPage();

</script>

</head>

<body>
<input type="button" value="Click" onclick="loadPage()" /><br />
<iframe id="display_frame" width=600 height=600 frameborder="1"></iframe>
</body>
</html>


iframe_Test_2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
	function myFunc()
	{
		alert("Yeah!");	
	}
</script>
</head>

<body>
<input type="button" value="yahoo!" onclick="document.getElementById('dis_ifr').src='http://www.yahoo.com'" />
<iframe id="dis_ifr" src="http://www.google.com" width="600" height="480" frameborder="1">
</iframe>
</body>
</html>


When I clicked the button on iframe_Test.html, it loads iframe_Test_2.html into the iframe and shows the content, however the myFunc() was not invoked and the alert box didn't pop up :(
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1