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

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");

}

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>

  <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");

}

Share Improve this question edited Jul 14, 2014 at 3:14 asked Jul 3, 2013 at 19:39 Giliweed 5,1778 gold badges30 silver badges35 bronze badges

Rule #3 seems weird, but an important question to have an answer to before you embark on a solution is if the two pages are on the same domain? – Jason Sperske Commented Jul 3, 2013 at 19:44
1 Please provide the code you've tried. "Make a good faith attempt to solve the problem yourself first. If we can't see enough work on your part your question will likely be booed off the stage; it will be voted down and closed." meta.stackexchange./questions/10811/… – showdev Commented Jul 3, 2013 at 19:44
rule #3 is used for creating the home page with css layout only . no table is allowed to create/design the home page. And yes the all the pages in the same domain or I say in the same folder. @JasonSperske – Giliweed Commented Jul 3, 2013 at 19:48
I only say it looks weird because it is unrelated to the task of fetching HTML and modifying the DOM. As long as the two pages are on the same domain you are free to do an Ajax fetch, and modify your document. This plex code is actually wrapped in a super simple function in jQuery called .load(). However @showdev is right, you are going to have to demonstrate more effort before people will do the work for you. – Jason Sperske Commented Jul 3, 2013 at 20:03
Are you loading content from external HTML files? Or can all of the content exist in the same file? – showdev Commented Jul 3, 2013 at 20:07

| Show 5 more ments

5 Answers 5

Sorted by: Reset to default 4

AJAX is what your assignment is looking for.

Simple Example

HTML:

<button id="nav">load</button>
<div id="page"></div>

JS:

document.getElementById('nav').onclick = function(){
var xhr = new XMLHttpRequest();

    xhr.onreadystatechange=function()
  {
  if (xhr.readyState==4)
    {
        document.getElementById("page").innerHTML = xhr.response;

    }
  }
xhr.open("GET", "http://www.codecademy./", false);

xhr.send(); 
}

fiddle: http://jsfiddle/DZmBG/3/

In one of your ments, 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." onclick="return go(this);">stuff</a>
  <a href="http://www.fun." onclick="return go(this);">fun</a>
  <a href="http://bing." 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/sAcCV/

EDIT:

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

See Relfor's answer.

Iframe is the obvious answer. That's what it was made for. But since your requirements state you can't use it....

Any site that's not within your domain is going to violate the same origin policy, and Javascript in the remote page is not going to run as you probably would think it would inside a div on your site. You'd probably have to examine a CURL get approach or something similar to do it with a straight div and javascript.

AJAX is definitely the way to go if you are not able to use iframes. I would suggest using jQuery for this example to save some time. Their AJAX handling is pretty straightforward and you are gonna want to use their .live() or .on() event handlers to track the click events inside the containers.

Additionally, you may run into issues if you are loading sites on different domains. AJAX calls are typically meant for same-domain responses. You can get around this using JSONP. However, your web service must support method injection for this to work. In not, you may want to see if you can work around the iframe barrier with your host/webmaster.

You can not. You are asking for something that can not be done. For such situation you must use iframe.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

5 Answers 5

与本文相关的文章

评论列表(0)