Getting variables from URL for IFrame

@DemotisAug 08.2006

I have a page that has three iframes in it. Left frame pulls a site that has case numbers as links in a list format. The top right frame has a form for updating case data. The lower right has the case details. When you click the links on the left it passes a url with a ?case=number to the lower right frame. There is a field in the upper right frame called CASENUMBER.

What I want to do is check for when the lower right frame (MAIN) gets updated from someone clicking the link on the left. I want to pull the search text and put the value in the form field in the upper right frame.

Here are my two questions.

what code do I need in the parent page to check for the iframe update of the lower right frame?

what code do I use to break out the search part of the url.

to post a comment

JavaScript

3 Comments(s) _↴

@UltimaterAug 08.2006 — #Use the TARGET attribute on an A tag so upon click, the link will load in the targeted frame. Also can use the TARGET attribute on FORMs.

<i>
 </i>&lt;a href="news.htm" target="lowerRightFrameName"&gt;news&lt;/a&gt;

As far as the querystring:

http://www.aplustv.com/public_stuff/querystring1.htm

<i>
 </i>&lt;script type="text/javascript"&gt;
 function param() {
 if(!("search" in location))return null;
 var q=location.search,n,i,l,pn;
 if(!q)return null;
 if(q.charAt(0)!="?")return null;
 q=q.substr(1);
 q=q.split("&amp;");
 n=[];
 l=q.length;
 for(i=0;i&lt;l;i++){
 n[n.length]=q[i].split("=");
 }
 p=[];
 pn=[];
 l=n.length;
 for(i=0;i&lt;l;i++){
 p[(decodeURI(n[i][0])).replace(/+/g," ")]=(decodeURI(n[i][1])).replace(/+/g," ");
 pn[pn.length]=(decodeURI(n[i][0])).replace(/+/g," ");
 }
 n=[];
 l=arguments.length;
 if(l==0)return pn;
 
 for(i=0;i&lt;l;i++){
 if(arguments[i]+1==arguments[i]-0+1){if(arguments[i] in pn){n[n.length]=pn[arguments[i]];continue}}
 if(arguments[i] in p){n[n.length]=p[arguments[i]];continue}
 }
 return n;
 
 }
 &lt;/script&gt;

<i>
 </i>&lt;script type="text/javascript"&gt;
 alert(param(param(0)))
 alert(param().join("n"))
 alert(param(0,1,2,3,4,5))
 alert(param("myParam 1","myParam 2","myParam 3","myParam 4","myParam 5").join("n"))
 &lt;/script&gt;

If you want to know when the bottom right frame has been updated, you can either add an onload event handler to each page or add an onclick event handler to all the links.

<i>
 </i>&lt;a href="news.htm" target="lowerRightFrameName"
 onclick="top.frames[0].doSomething(this.getAttribute('href'));return true;"&gt;news&lt;/a&gt;

@DemotisauthorAug 08.2006 — #Thank you very much for the quick reply.

The two pages that are generated from the database of open cases (Links on left - details on lower right) can't be modified by me. The page at in the upper right frame and the parent page is on my server. It would be so much easier is I did have access to those pages, but I don't. So I can't put in an onload on the pages to update the form field. This is why I need it to detect that the frame has changed in the parent document.

As for getting the variables from the URL of the frame this one of the things I've tried. But it hangs and does nothing. I was just calling this from a button in the upper right frame.

[CODE]if (window.top.frames['MAIN'].location.search != "")
 {
 var x = window.top.frames['MAIN'].location.search.substr(1).split(";")
 for (var i=0; i<x.length; i++)
 {
 var y = x[i].split("=");
 alert("Key '" + y[0] + "' has the content '" + y[1]+"'")
 }
 }[/CODE]

@UltimaterAug 08.2006 — #I already showed you my "param" function for parsing the querystring. However if you would rather have it as short as possible, give the following regular expression a try assuming that this is the query string:

?x=1&y=2312&z=234324

then your code would look like this:

<i>
 </i>var paramName="y"
 alert(window.top.frames['MAIN'].location.search.match(new RegExp(paramName+"=([^&amp;]*)"))[1])

As far as detecting when the page changes, you could use an interval.

One problem with frames in JavaScript however is that you cannot use JavaScript to reference a frame unless it's from the same server otherwise a cross-server access denied security error will be encountered. (subdomains are treated as foreign servers to eachother in JavaScript)

If you encounter such an error, I'd advice working with server-side HTTP Requests.

Also in #JavaScript _↴

Performing Math Operations In Fields Javascript: indexof & substr How to avoid inserting multiple records

Success!

Help @Demotis spread the word by sharing this article on Twitter...

Tweet This

Getting variables from URL for IFrame

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Getting variables from URL for IFrame

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴