loading pages with iframes dynamically [Archive]

View Full Version : loading pages with iframes dynamically

Perki1

06-28-2010, 05:53 AM

Hi

Is there a script that can be added to a link or page, that when a link is selected, opens a page with an iframe in it and then loads another page into the iframe, depending on which link the user selects originally?

Examples from the main index page:

Link: Junior Downloads (downloads/downloads_home.html...and automatically loads 'juniordownloads.html' in the iframe of 'downloads_home.html')

Link: Senior Downloads (downloads/downloads_home.html...and automatically loads 'seniordownloads.html' in the iframe of 'downloads_home.html')

Is this possible?

Cheers

djr33

06-28-2010, 06:11 AM

You cannot control a different page from an unrelated page. This is possible if the receiving page allows this, but it won't be possible if, for example, you're using an outside site and want to insert an iframe with a certain page loaded.

If you setup the page you're loading to receive a value for the page to be loaded, that's easy, though you can also just set this page up that way in the first place-- will that URL for the iframe ever change?

What you can look at using is a variable in the URL of the format page.ext?variable=value, so you can send it as url=mypage.htm.
The problem is that you will need to do something with that. It's possible to use Javascript but not reliable. If you can use PHP or another serverside language it will be more reliable.

molendijk

06-28-2010, 10:26 AM

As observed by djr33, you can apply a technique that uses the query string portion of the url. Here's an example.
In index.html:
<head>
<script type="text/javascript">
/*Loading a new file in the iframe each time we go to a new page */
var object_url = "page1.html"; //starting iframed page; adapt to your needs
var content = (location.search) ? location.search.substring(1, location.search.length) : object_url;

function load_iframe() {
top.ifr.location.replace(content)
}
window.onload=load_iframe
</script>

<script type="text/javascript">
/* This function will be used in index.html (containing your menu and the iframe). Links in index.html:
href="javascript: load('page1.html')", href="javascript: load('http://www.google.com')" etc. */
function load(which)
{
location.href='?'+which
}
</script>

</head>

<body>


<a href="javascript: load('page1.html')">Home (page 1)</a>
<a href="javascript: load('page2.html')">page2</a>
<a href="javascript: load('http://www.google.com')">Google</a><br>

<iframe name="ifr" style="your styles for the iframe"></iframe>

</body>

</html>
In all other pages:

<head>
<script type="text/javascript">
function orph(){//prevent pages from being orphaned
if (top.location == self.location)
top.location.href="index.html?" + document.URL
}
window.onload=orph;

/* This function will be used in the pages that are loaded in the iframe.
href="javascript: load('page1.html')", href="javascript: load('http://www.google.com')" etc. */
function load(which)
{
top.location.href='index.html?'+which
}
</script>
</head>

<body>
Bla
</body>
Arie Molendijk.