loading html files in iframe

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
onlyvin
Forum Newbie
Posts: 6
Joined: Fri Oct 26, 2007 5:50 am

loading html files in iframe

Post by onlyvin »

hi

i want to load html file in iframe. for details gothrough snapshot.
Actually i want to load next page of the link (left side links) in same iframe. is there any way to load no. of html pages in same iframe. pls. help.

Thanks in advance
Vina
Attachments
snap.gif
snap.gif (44.74 KiB) Viewed 1721 times
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: loading html files in iframe

Post by superdezign »

If each link is a separate page, then just have each page determine which iframe to load.

Code: Select all

<ul class="menu">
    <li><a href="?item=1">Item #1</a></li>
    <li><a href="?item=2">Item #2</a></li>
    <li><a href="?item=3">Item #3</a></li>
</ul>
 
<?php
if (isset($_GET['item']) & is_numeric($_GET['item'])) {
    $item = (int)$_GET['item']
}
 
if (!(isset($item) || $item > 1 || $item < 3) {
    $item = 1;
}
 
switch ($item) {
    case 1:
        echo '<iframe src="..."></iframe>'; break;
    case 2:
        echo '<iframe src="..."></iframe>'; break;
    case 3:
        echo '<iframe src="..."></iframe>'; break;
}
?>
onlyvin
Forum Newbie
Posts: 6
Joined: Fri Oct 26, 2007 5:50 am

Re: loading html files in iframe

Post by onlyvin »

hi

thanks, but can we use javascript for the same?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: loading html files in iframe

Post by superdezign »

Sure. Set up each individual link to have a URL associated with it. The URL will be the src attribute of your iframe. You could do it via the href attribute of the link.

Code: Select all

<ul class="menu">
    <li><a class="menu-item" href="...">Item #1</a></li>
    <li><a class="menu-item" href="...">Item #2</a></li>
    <li><a class="menu-item" href="...">Item #3</a></li>
</ul>
<iframe id="content" src=""></iframe>

Code: Select all

var iframe = document.getElementById('content');
var items = document.getElementsByTagName('a');
 
for (var i in items) {
  if (items[i].className == 'menu-item') {
    items[i].addEventListener('click', loadContent);
  }
}
The loadContent() function would set the src attribute of the iframe element into the href attribute of the menu item element, then cancel the default action of the click. You could also make use of the hash of the link to avoid having to cancel the default action of clicking.
onlyvin
Forum Newbie
Posts: 6
Joined: Fri Oct 26, 2007 5:50 am

Re: loading html files in iframe

Post by onlyvin »

can u explain me in detail? javascript is not working.
Post Reply