How do I load a nested web page in a <div> tag using only javascript and html?

css, html, javascript

Solution

In one of your comments, you mentioned using `<object>` tags to embed external HTML files.

Here is an example using that method:

HTML:

<div id="links">
  <a href="http://stuff.com" onclick="return go(this);">stuff</a>
  <a href="http://www.fun.com" onclick="return go(this);">fun</a>
  <a href="http://bing.com" onclick="return go(this);">bing</a>
</div>

<div id="container"></div>

CSS:

div#container {
    width:500px;
    height:500px;
    overflow:hidden;
}

JS:

function go(obj) {
    var page=obj.href;
    document.getElementById('container').innerHTML='<object data="'+page+
      '" type="text/html"><embed src="'+page+'" type="text/html" /></object>';
    return false;
}

http://jsfiddle.net/sAcCV/

EDIT:

This being said, I recommend using AJAX to load external content, instead: http://www.javascriptkit.com/dhtmltutors/ajaxincludes.shtml

See Relfor's answer.

Problem

I have a home page with multiple `<div>` tags. One of the `<div id="top_bar">` contains a link. If I click on the link, a new web page should load on one of the other `<div id="content">` in home page. How do I do that? More over, if the newly loaded page on one of the other `<div id="content">` contains a link, and clicking on the link helps the 2nd new web page load in the `<div id ="content">` tag replacing the first content of the div , the question is how do I do that? This is an assignment given to me and the rules are: - I have to use Javascript, CSS and HTML only. - I can't use `<iframe>` tag. - I can't use `<table>` tag either to load page in a row/column. I need help and advice about how to do it. home.html ``` <body> <div id="topBar"> <a href ="#" onclick="load_home()"> HOME </a> <a href="#" onclick="load_about()" > ABOUT </a> <a href="#" onclick="load_search()"> SONG LIST </a> </div> <div id ="content"> </div> </body> ``` I want the music.html to open in side the < div id="content" > which all ready does. but in music.html there is a button. I want to open Songlist.html in < div id="content" > by clicking on that button. code for music.html : ``` <body > <form name="flyrics" method="get" > Lyrics: <input type ="text" name ="lyrics"/> Artist Name:<input type ="text" name ="artist" /> <input type="submit" id="x" value="Search" /> </form> </body> ``` javascript: ``` function load_home(){ document.getElementById("content").innerHTML='<object type="type/html" data="home.html" id="link_pages" ></object>'; } function load_about(){ document.getElementById("content").innerHTML='<object type="type/html" data="about.html" id="link_pages" ></object>'; } function load_search(){ document.getElementById("content").innerHTML='<object type="type/html" data="music.html" id="link_pages" ></object>'; } function validation(){ var x=document.forms["flyrics"]["lyrics"].value; if (x==null || x=="") { alert("Search without Lyrics?"); return false; } var y=document.forms["flyrics"]["artist"] value; if (y==null || y=="") { alert("Search without Artist Name?"); return false; } window.open("songList.html", "currentWindow"); } ```

Original source