Forum Moderators: open

Message Too Old, No Replies

JavaScript to Break out of Frames

         

Philosopher

3:19 am on Jul 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ok..I originally posted this in the html forum and keyplr recommended some javascript for what I need. Unfortunately, I was unable to get it to work, but thought it would probably be better to post in here anyway.

This is what I have. I am taking on a new project that is probably going to require me to frame a couple of pages here and there that are NOT under my control so I can't place any frame breaking code directly on the target pages.

What I want is to frame the initial pages, but not trap the user in my original frameset. Is there some Javascript I could implement on my frameset page that would break the visitor out of the frames when he/she clicked on a link on the framed page?

Again, the code must be on my original frameset page as I have no control over the framed page so I can't use most methods available.

Philosopher

4:07 am on Jul 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well...never mind Tedster answered it in the HTML forum and I'm unable to automate it (was afraid of that).

StupidScript

9:30 pm on Jul 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If the contents of the frame you wish to maximize/isolate are not under your control or you are not otherwise granted authority to manipulate them, then Javascript will issue security problems.

i.e.

<frameset rows"100,*">
<frame name="home" src="topframe.html">
<frame name="away" src="http://www.google.com">
</frameset>

You cannot even gather the URL in "away" from "home" without permission from the user.

What you CAN do is store the URL that will load into "away" in a script on your frameset page when the request is made to load that foreign domain's property.

i.e.

FRAMESET PAGE:
<script language="javascript" type="text/javascript">
var thispg="";
function loseFrames() {
top.location.href=thispg;
}
</script>
<frameset rows="100,*">
<frame name="home" src="topframe.html">
<frame name="away" src="bottomframe.html">
</frameset>

"topframe.html":
<a href="javascript:parent.loseFrames()">Remove Frames</a><br>
<a href="http://www.google.com" target="away" onclick="parent.thispg=this.href">Google</a>

"bottomframe.html":
<a href="http://www.google.com" onclick="parent.thispg=this.href">Google</a>

When the user clicks on the "Google" link in either frame, it loads Google into the lower frame AND sets the frameset's "thispg" variable to the correct URL, without needing the user's permission. Whichever is the last foreign link the user clicked on will be the top level page when they click "Remove Frames".

Note that if the user surfs around in the lower frame before hitting the "Remove Frames" link, they will be returned to the first location...whatever was stored in the "thispg" variable. So if they go to Google and do a search and THEN click "Remove Frames", they will be back at Google without the search...but what the heck.

That's about the only concept you've got for this, unless you get the user to grant you permission. Other languages are good for this, too, like PHP.

[edited by: StupidScript at 10:15 pm (utc) on July 23, 2004]

StupidScript

10:06 pm on Jul 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



After reading your HTML question, I realize that you may intend to begin with no frameset, only invoking it when the user clicks on a foreign link. Here is a solution to that problem:

"noframe.html":
<a href="frameset.html?url=http://www.google.com/">Google</a>

(Note the trailing slash after google.com is required. That or a page name. google.com alone will cause an error in some browsers.)

"frameset.html":
<script language="javascript" type="text/javascript">
thispgA=top.location.href.split("url=");
var thispg=thispgA[1];
setTimeout('frames["away"].location=thispg',100);
function loseFrames() { top.location.href=thispg; }
</script>
<frameset rows="100,*">
<frame name="home" src="topframe.html">
<frame name="away" src="about:blank">
</frameset>

"topframe.html":
<a href="javascript:parent.loseFrames()">Remove Frames</a><br>
<a href="http://www.google.com" target="away" onclick="parent.thispg=this.href">Google</a>

If you add more parameters to the URI on "noframes", then you will need to perform another split() on the location and choose the proper array element from the result on "frameset".

Philosopher

12:30 am on Jul 25, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hmmm...ok...you've got me thinking...but not being much of a javascript expert (read "understatement") I was having a bit of a problem following the code so let me give you an example to make sure the code you presented will work for what I want.

Let's say I have www.widgets.com. Widgets.com does NOT have frames on it's normal pages.

On a page on widgets.com I want to link to google (not really...just example), but need the page to open up within a frame.

What I don't want is the user stuck in my frames, so what I want is when the user clicks on a link on google they break out of my frames without having to do anything intentional on their end and are taken to the target page of the link they clicked on.

So...will the second code example you gave me work in this situation? If so, I'll start analyzing it.

Thanks again.

StupidScript

4:53 pm on Jul 26, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yes. The second script will accomplish that.

Once in the frameset, use the first script to organize foreign links in the top frame (or whichever one you decide to use for your own files.)

Here is the second script with comments for your analysis:

=== START ===
<!--
This is the syntax for any foreign link you want to open in a new frameset FROM a non-framed page ("noframe.html"): -->

<a href="frameset.html?url=http://www.google.com/">Google</a>

<!--
This carries over the foreign address in the URL that opens the frames, so you can have access to that info in a location you have authority over to grab the foreign address to use for your loseFrames() script when the frameset loads.

(Note the trailing slash after google.com/ is required. That or a page name. google.com alone will cause an error in some browsers.) -->

<!--
This script goes ON THE PAGE THAT DEFINES THE FRAMESET, in the HEAD ("frameset.html"): -->

<script language="javascript" type="text/javascript">
//use a temp array variable to hold the results of
//splitting the URL to get the value of the "url="
//variable (the foreign address passed from the link)
thispgA=top.location.href.split("url=");

//set a global variable with the appropriate array
//entry in the temp array
//thispgA[0] will = "frameset.html?"
//thispgA[1] will = "http://www.google.com/"
var thispg=thispgA[1];

//load the foreign address into the lower frame,
//after a 1/10th second pause (to give the frameset
//time to fully load)
setTimeout('frames["away"].location=thispg',100);

//set up the function that will get out of the frameset
function loseFrames() {

//works by setting the "top" window URL to the value of
//the global variable (the foreign address)
top.location.href=thispg;
}
</script>
<frameset rows="100,*">
<frame name="home" src="topframe.html" id="for_my_files">
<frame name="away" src="about:blank" id="for_foreign_addresses">
</frameset>

<!--
This goes on the page that INITIALLY LOADS INTO YOUR FRAMESET into the frame that you will keep control of ("topframe.html"):

This first link activates the loseFrames script, setting the "top" window URL to the value of the global variable. -->

<a href="javascript:parent.loseFrames()">Remove Frames</a><br>
<a href="http://www.overture.com/" target="away" onclick="parent.thispg=this.href">Overture</a>

<!-- You can add additional foreign address links to the top frame in this manner. When a user clicks on the link, it re-sets the global variable to the new href, replacing the one gathered by splitting the URL when the frameset first loaded. -->

=== END ===
Have fun!

BassPlaya

9:48 pm on Aug 12, 2004 (gmt 0)



I was just wondering how Philosopher made out with the 2nd script from StupidScript because if it worked I will try it too. I need to create a way for a user to "break out" of a frame too.

Thanks!