Solved

How to trap window.location change

Posted on 2007-12-04
8
2,493 Views
Last Modified: 2008-02-12
I have frame, how can i trap events related to iframes window.locaton change.
0
Comment
Question by:Maverick_Cool
8 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 75 total points
ID: 20406992
If the sites in your iframe are sites in your domain, you can run a function using setInterval() that will constantly check to see if the iframe's location has changed.

I don't know of a simple way with sites not on your domain. Javascript should give you a Permission Denied error in that case, because Javascript is not allowed to run cross-site.
0
 
LVL 82

Expert Comment

by:hielo
ID: 20407253
Try something similar to the following:
<html>
 <body>
<script type="text/javascript">
var lastLocation = "index2.html"
function checkSource(frameObj)
{
  if(lastLocation != frameObj.src)
  {
     alert("changed");
     lastLocation = frameObj.src;
  }
}
</script>
 <iframe src="index2.html" onload="checkSource(this)"></iframe>
</body>
</html>
0
 
LVL 5

Expert Comment

by:TheGD
ID: 20409678
Very simple solution for your problem:

1.   You need to put the following onload statement in the <BODY> tag of "each" file that is going to load inside the IFrame:

   <body onload="javascript:parent.IFrameLocationChanged(window.location);">

2. You need to define the following function in file which contain the IFrame:

   function IFrameLocationChanged(loc) {
      if (cur_iframe_location != loc) {
            cur_iframe_location = loc;
            alert("IFrame Location has changed to: " +  loc);
      }
   }

Here I have used the alert to display the location of the IFrame every time it is changed. While cur_iframe_location variable would always contain the current location of IFrame so this varible can be utilized anywhere else also.

Thanks.
0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 5

Expert Comment

by:TheGD
ID: 20409724
For you example sample html is given below:

This is the main file, i.e. that contain the IFrame
-------------------------------------------------------
<html>
<head>
<title> File Containing IFrame </title>
<script language=javascript>
      function IFrameLocationChanged(loc) {
            if (cur_iframe_location != loc) {
                  cur_iframe_location = loc;
                  alert("IFrame Location has changed to: " +  loc);
            }
      }
</script>
</head>
<body>
      ------------------- 
      -------------------
 
      <iframe src="abc.html"></iframe>
 
      ------------------- 
      ------------------- 
 
</body>
</html>
 
 
 
 
This is the abc.html file
-------------------------------------------------------
<html>
<body onload="javascript:parent.IFrameLocationChanged(window.location);">       
       -----------------------------
       -----------------------------
              Inside IFrame
       -----------------------------
       -----------------------------
</body>
</html

Open in new window

0
 
LVL 7

Author Comment

by:Maverick_Cool
ID: 20409811
Actually this a iframe, and i dont want touch it body, can anything be done from frame level
0
 
LVL 5

Expert Comment

by:TheGD
ID: 20410441
Hm, then use the Zyloch advice here is the solution:
<html>
<body>
 
	Below is the Iframe: <hr>
	<iframe src="abc.html" id="the_iframe" name="the_iframe"></iframe>
 
</body>
</html>
 
<script language="javascript">
 
var MiliSeconds_CheckIframeLocation = 1000; //1000 mili sec = 1 second
var cur_iframe_location = "";
 
function CheckIFrameLocationChanged() {
	if (cur_iframe_location != the_iframe.location.href) {
		cur_iframe_location = the_iframe.location.href;
		alert("IFrame Location changed: " + cur_iframe_location);
	}
}
 
setInterval("CheckIFrameLocationChanged();", MiliSeconds_CheckIframeLocation);
 
</script>

Open in new window

0
 
LVL 36

Expert Comment

by:Zyloch
ID: 20414281
Thanks for the proof of concept.
0
 
LVL 5

Assisted Solution

by:TheGD
TheGD earned 50 total points
ID: 20418314
You are welcome
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question