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:

Code:

<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>

<!-- This represents your menu -->
<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:

Code:

<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.

Thread: loading pages with iframes dynamically

Thread Tools

Search Thread

loading pages with iframes dynamically

Bookmarks

Bookmarks

Posting Permissions