How to Pass events between iframes and functions?

[ShadowMage]

Isn't this one of those things that only works over HTTP? Not on your desktop? Is that an issue for anyone?

Actually, that is the issue. I was testing it from my Desktop. As soon as I put it on the server, it worked. So this code:var iframe = document.getElementById("iFrame_test").contentWindow.document;seems to be perfectly cross-browser (at least as far back as IE 7, anyway)Just out of curiosity, why is it that Chrome blows up when it tries to run that from the filesystem? Security? What kind of security issues can arise from that?

[jeffman]

Usually I can think of a way to exploit the kind of security issues most browsers protect us against. This one stumps me. Maybe I'm not creative enough?

[dsonesuk]

as a matter interest what was the src of your iframe linking to? a page on desktop server, or external website like google.com

[jeffman]

I can't speak for shadow, but I have received the security bomb even if it's 2 of my own documents living on my desktop.

[ShadowMage]

as a matter interest what was the src of your iframe linking to? a page on desktop server, or external website like google.com

just another page in the same folder.

[mEno]

So, now, I would like to pass parameters to the function in the following way:

window.onload = function() {    //Assuming I got the anchors and they are stored in the variable below    for (var i=0; i<anchors_in_frame.length; i++) {         anchors_in_frame[i].onmousemove = function(event){               alert(i);               //some other functions follow         }     }}

The first iteration of the above code, which happens when the page loads, I think is fine. However, afterwards when the onmousemove even is activated, the variable i keeps having its last value passed to onmousemove. I mean it's correct behaviour, but how can I make the first value of i stick in the function?

[ShadowMage]

I've run into this same problem before. The only way I could think of to solve it was to use...*braces self*...eval. *cringe*ie:

for (var i=0; i<anchors_in_frame.length; i++) {   anchors_in_frame[i].onmousemove = eval("(function(event){alert("+i+");})");}

I'm almost positive that this is not a good solution, and I hope someone else can shed some light on this issue.

[justsomeguy]

You can add an attribute to the element to store that value, then get it inside the function. The event object may change a little bit from browser to browser, but there will be a way to get a reference to the element that the event applies to, and then use getAttribute to get the value back.

window.onload = function() {	//Assuming I got the anchors and they are stored in the variable below	for (var i=0; i<anchors_in_frame.length; i++) {		 anchors_in_frame[i].setAttribute('count_ref', i);		 anchors_in_frame[i].onmousemove = function(e){		   var evt=window.event || e;		   if (!evt.target) //if event obj doesn't support e.target, presume it does e.srcElement			 evt.target=evt.srcElement;		   var i = evt.target.getAttribute('count_ref');		   alert(i);		 }	 }}

[ShadowMage]

You can add an attribute to the element to store that value, then get it inside the function. The event object may change a little bit from browser to browser, but there will be a way to get a reference to the element that the event applies to, and then use getAttribute to get the value back.

Hey, cool! I never thought to create a new attribute. See, I new there was a better way. :)Except I didn't use setAttribute/getAttribute. I just used dot syntax:

var types=1;while(document.getElementById("div"+types)) {	document.getElementById("div"+types).typeNum = types;	document.getElementById("div"+types).onclick = function() {		alert("Clicked on div"+this.typeNum);	}	types++;}

[mEno]

Thanks ShadowMage and justsomeguy for the creative solutions.ShadowMage, I tried that initial solution of yours and it did work but as you mentioned using that eval function was not a good idea, so I waited for a better one. Your second one does work well as well.justsomeguy, I tried your solution and it worked very well. I appreciate the help.

[dsonesuk]

OR you could use an alternative to eval, using 'new Function' method

window.onload=function(){var F = document.getElementById("myFrame");var Fcontent = F.contentDocument || F.contentWindow.document;var anchors_in_frame = Fcontent.getElementsByTagName('a');var Flisterner = F.addEventListener || F.attachEvent;	  for (var i=0; i<anchors_in_frame.length; i++) 		{		DOMcodeToRun = "alert("+i+");";		var tmpFunc = new Function(DOMcodeToRun);		if(Flisterner == F.addEventListener)	{	  anchors_in_frame[i].addEventListener("mousemove",tmpFunc,false);	}else	{	anchors_in_frame[i].attachEvent("onmousemove",tmpFunc);	}			   }}

[justsomeguy]

That's true, and works well in certain situations, but that method has all of the negative reasons for not using eval.