javascript ‘load-in-frames’, how to target the iframe

@jdoublekJul 18.2006

Hi, I have been using the following:

~~[I]~~<script language=”JavaScript”>
<!–
if (parent.location.href == self.location.href) {
window.location.href = ‘my_index.html’;
}
// –>
</script>[/I]

I have made a site using iframes (our server does not support .php ssi etc etc..). My problem is that I have made a homepage with all the navigation etc on it, and subsequent sub pages with plain content (no navigation). Should the user get to a sub page e.g. via a search engine, they would not get the homepage layout, just the content.

I used the above code to try auto re-direct the sub-page to the homepage if it is landed on without the homepage. The problem is that it loads the iframe src (as defined in the iframe code), instead of loading the page that was landed on. I was wondering if there is a way (similar to target=”x_iframe”) to load the current page into the iframe of the main homepage?

I hope I have explained myself clearly! ?

Thanks for any help!

to post a comment

JavaScript

12 Comments(s) _↴

@BrownBearJul 18.2006 — #one possible way for you is to add a parameter to 'my_index.html', for example:
[CODE]window.location.href = 'my_index.html?'+window.location.href[/CODE].

Your main page will get this parameter from its location.href and use it to set src of iframe. Instead of url you can add a number and do the mapping inside your 'my_index.html'.

@jdoublekauthorJul 18.2006 — #Hi BrownBear,

Thank you very much for your reply! Could you explain a bit more...I have to include the code you mentioned into the header of the main/homepage? Also, Im not too sure how to go about the mapping with numbers.

My apologies, I am not too familiar with js (use mostly html/css), so any further help would be greatly appreciated!

@Angry_Black_ManJul 18.2006 — #i created two pages on my desktop:

iframe.html

[code=php]<body bgcolor=green>
 
 hello!<br>
 
 <iframe src="content.html" width=500 height=500>[/code]

and

content.html

[code=php]<script LANGUAGE="JavaScript" src="breadcrumbs.js"></script>
 
 <script language="JavaScript">
 <!--
 if (parent.location.href == self.location.href)
 window.location.href = 'iframe.html';
 // -->
 </script>[/code]

for these purposes, breadcrumbs.js alerts "hello"

if you notice, i did not change your statement at all (except to work in my scenario). it works fine under IE7b3, ie6, and FF 1.5.3 (or whatever FF is the one version before the most recent as of this date)

... edit

i think that i see what youre saying.. the window.location.href doesnt know which iframe to load after its been reloaded?

what the guy above is saying is that you do

window.location.href = 'HTTP://ABSOLUTE-WEBSITE-PATHNAME.com' + self.location.href;

it will then load the following into the address bar:

http://blah.com?http://blah.com/content_page_that_was_googled.html

..whatever the default page is for blah.com (lets say, index.html) has dynamic scripting that reads the URL, cuts off everything before the question mark, and then loads that page into the iframe on index.html

for instance, the js in your index.html would contain:

[code=php]var unalteredURL = window.location + "";
 
 // the first variable declaration finds where the question mark in the unaltered URL is. it is a
 // numeric value. for instance:
 
 // 0123456789
 // cheese?one
 
 // if we ask for the indexof("?") + 1, it will return 7 becuase the index of the ? is 6, and we add
 // one so we dont add a question mark to the start of our URL 
 // (ex: ?http://www.yahoo.com = bad)
 // (ex: http://www.yahoo.com = good)
 
 // the second variable declaration finds where the first instance of NOTHING occurs. if it finds
 // nothing, then we know that we've reached the end of the unaltered url. this becuase there is
 // no need to account for spaces at the end of our unaltered URL
 
 var subUrlBegin = unalteredURL.indexOf("?") + 1;
 var subUrlEnd = unalteredURL.lastIndexOf("");
 
 // now that we know our numbers, we use this line to give us JUST the url, which we pass to the frame
 
 var url = unalteredURL.substring(subUrlBegin, subUrlEnd);
 
 [/code]

and then using URL, you have a document.write that creates an iframe on your page someplace, and uses the JS variable URL as the target.

@BrownBearJul 18.2006 — #in your sub-page:

[CODE]
 <script language="JavaScript">
 <!-- 
 if (parent.location.href == self.location.href) {
 top.location.href = 'my_index.html?'+self.location.href;
 }
 // -->
 </script>
 [/CODE]

in your main page:

[CODE]
 <script language="JavaScript">
 <!-- 
 var url = self.location.href;
 var ind = url.indexOf("?");
 if(ind > 0 && ind + 1 < url.length)
 {
 document.getElementById("myIFrame").src = url.substring(ind + 1);
 }
 // -->
 </script>
 <iframe id='myIFrame'  .....
 [/CODE]

@jdoublekauthorJul 18.2006 — #Hi Aaron,

I have already got that specific code to work both on my local drive and on the server. The problem is that it does not load the current page that you are on. For example if you had 1 main/homepage, and two content pages...The iframe src="x" will always load, so if either page 1 or 2 loads, and (for example) page 1 is the source, page 1 would always load.

Im looking for a way to ensure that the current page someone lands on will always reload in the homepage iframe...

Thanks for your help!

@Angry_Black_ManJul 18.2006 — #his will work. and 10000x better than mine. they are both the same, just mine is amatureish.

@Angry_Black_ManJul 18.2006 — #looking again, his code is PERFECT!!

@jdoublekauthorJul 18.2006 — #Thanks again BrownBear, I think I see what the code is trying to do...however, Im still getting problems. It seems to write the current page to the address bar, but doesnt seem to pass this on (target) to the iframe.. ? I have substituted the ID's etc with my own. Am I doing something incorrect here?

Thanks for your continued help.

@BrownBearJul 18.2006 — #I need the code. is there url I can hit?

@jdoublekauthorJul 18.2006 — #unfortunately there isnt code working on the net (as its a work site). However:

Main site code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">



</script>

</head>

<body bgcolor="#999999">

<table width="720" border="0" cellspacing="0" cellpadding="0">

<tr>

<td> <iframe src="inner.htm" id="myframe" name="site" width="720" marginwidth="0" height="435" marginheight="0" align="right" scrolling="no" frameborder="0" class="main" border="0">

Your browser does not support inline frames or is currently configured not

to display inline frames.</iframe></td>

</tr>

</table>

</body>

</html>

----------------------------------------------

sub page code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">



</script>

</head>

<body>

test java page 2, this is 2

</body>

</html>

--------------------------------------------------

The two sub pages are inner.htm and inner2.htm (inner2 is the one I want to reload for the test purposes). Does this help?

Thanks

@BrownBearJul 18.2006 — #2 things:

1. in main page, script block have to after iframe definition (or be called in onload handler)

2. in sub page it should be top.location.href, not window.location.href and you missed a question mark - it should be 'iframe_test.htm?'.

@jdoublekauthorJul 18.2006 — #BrownBear, you legend! Thank you very much for helping me solve this problem so effectively and quickly!! (thanks also Aaron for your input :p)

Also in #JavaScript _↴

add border bottom on menu ul when hover on li how to distinguish between delete key and .(dot)?Submitting a form if user navigates away from page or closes window

Success!

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

Tweet This

javascript ‘load-in-frames’, how to target the iframe

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

javascript ‘load-in-frames’, how to target the iframe

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴