Page 1 of 1

loading html files in iframe

Posted: Tue Sep 08, 2009 6:11 am
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

Re: loading html files in iframe

Posted: Tue Sep 08, 2009 6:20 am
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;
}
?>

Re: loading html files in iframe

Posted: Tue Sep 08, 2009 6:29 am
by onlyvin
hi

thanks, but can we use javascript for the same?

Re: loading html files in iframe

Posted: Tue Sep 08, 2009 6:38 am
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.

Re: loading html files in iframe

Posted: Tue Sep 08, 2009 7:10 am
by onlyvin
can u explain me in detail? javascript is not working.