PDA

View Full Version : Detecting a change in external IFRAME location



name _F1
Sep 7th, 2007, 10:09 AM
My page contains an IFRAME to another site. I wish to be able to detect when the location of the frame changes (through the user clicking a link in the frame, for example) and perform a Javascript function accordingly. I know that I cannot get the location of the frame, due to XSS restrictions.

YUI History Manager detects a change in the IFRAME location as a change in the page, but I can't isolate the code that allows it to do this so I can perform a function without having to use the entire history manager, and so that it will only detect changes to the IFRAME rather than the other elements on my page.

Is it possible, and if so, how? Any comments/advice would be appreciated.

Kor
Sep 7th, 2007, 01:07 PM
I am afraid you can not, at least not with javascript. You can not handle/refer window's or document's objects or properties from another domain with javascript, due to obvious security restrictions.

name _F1
Sep 7th, 2007, 01:54 PM
Any idea how YUI Browser History Manager (http://developer.yahoo.com/yui/history/) manages to trigger an event when an external IFRAME's location is changed?

EDIT:
Example:


<html>
<head>
<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.3.0/build/yahoo/yahoo-min.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/event/event-min.js"></script>

<!-- Browser History Manager source file -->
<script src="http://yui.yahooapis.com/2.3.0/build/history/history-beta-min.js"></script>

<script type="text/javascript">
var myModuleBookmarkedState = YAHOO.util.History.getBookmarkedState( "myModule" );
//if there is no bookmarked state, assign the default state:
var myModuleInitialState = myModuleBookmarkedState || "myModuleDefaultState";
function myModuleStateChangeHandler( state ) {
// Update the UI of your module according to the "state" parameter
alert('State changed!');
}
YAHOO.util.History.register(
"myModule",
myModuleInitialState,
myModuleStateChangeHandler
);
</script>
</head>
<body>
<script type="text/javascript">YAHOO.util.History.initialize(); </script>
<iframe src="http://www.google.com/"></iframe>
</body>
</html>


I copied it straight from the YUI docs for simplicity, it's just an example to prove that IFRAME change can be detected and aid anyone in trying to isolate how it's done.

Kor
Sep 7th, 2007, 03:50 PM
Sir, that is possible only if the owner of the site has previously build a javascript code which you are loading. In other words, he wants to send you informations about it's site, so that data came from his site to your browser because he wants so. If there is no such a code in that site, I keep saying that there is no way with javascript to control a web page from another domain.

name _F1
Sep 7th, 2007, 04:17 PM
I don't want to retrieve any information from the external page. All I want to know is when the user clicks a link in the frame, thus changing the location of the frame, and perform a function when that event happens.

All my example does is perform an alert dialogue when I click a link in the frame -- that all I need it to do. My question is how I can have this functionality without including the whole YUI History Manager.

nikkiH
Sep 7th, 2007, 05:37 PM
they're using the length property of history.


<body>
<script type="text/javascript">
function checkHistory()
{
alert(history.length);
}
</script>
<a onclick="checkHistory()"><u>click</u></a>
<iframe src="http://www.google.com/"></iframe>
</body>

name _F1
Sep 8th, 2007, 02:11 AM
Thank you nikkiH, is it possible to perform a function when that property changes, rather than checking if it has changed and then performing a function. I mean, can I trigger the function as soon as history.length changes?

nikkiH
Sep 10th, 2007, 04:32 PM
It doesn't support it, no.
You could poll the property using setInterval, though.


<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> New Document </title>
</head>

<body>
<script type="text/javascript">
var oldHistLength = history.length;

setInterval ( "checkHistory()", 1000 );

function checkHistory()
{
if (oldHistLength != history.length)
{
alert("changed");
oldHistLength = history.length;
}
}
</script>
<iframe src="http://www.google.com/"></iframe>
</body>
</html>