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

Question

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

}

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
– Jason Sperske, Commented Jul 3, 2013 at 19:44
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.com/questions/10811/… — showdev
– 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
– 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 complex 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
– 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
– showdev, Commented Jul 3, 2013 at 20:07

Raj Nathani · Accepted Answer · 2013-07-03 20:57:19Z

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.com/", false);

xhr.send(); 
}

fiddle: http://jsfiddle.net/DZmBG/3/

edited Jul 3, 2013 at 20:57

answered Jul 3, 2013 at 19:43

Raj Nathani

2,8551 gold badge22 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Giliweed Over a year ago

I hope you saw the rules. @Relfor

showdev Over a year ago

+1 best method. However @Giliweed, if you haven't learned AJAX in class, your teacher may be expecting something else. (In my experience, homework assignments are generally based on techniques learned in class.)

Giliweed Over a year ago

well, the truth is this assignment is for mid term examination only and Ajax is not included in mid term examination syllabus. when I pass mid term examination I will go for final term examination. and ajax , jqury are all in final term examination syllabus. So even if ajax gives an easy solution I'm not allowed to use it. sigh. I hope you understand why I'm trying to solve the problem in the hard way. @showdev

Community · Accepted Answer · 2017-05-23 12:14:52Z

3

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.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jul 3, 2013 at 20:44

showdev

29.3k37 gold badges61 silver badges82 bronze badges

2 Comments

Giliweed Over a year ago

yes. it works. but what if obj.href has a link to another web page and I want to open it in <div id="container"> by clicking on the link and replacing current obj.href url. How do you do that? This is where I'm stuck.

showdev Over a year ago

I don't understand. Upon clicking a link, the code above takes the href from the <a> tags and embeds that URL in the <div id="container">. Are you referring to a link on the embedded page? I recommend using AJAX -- see Relfor's answer.

bpeterson76 · Accepted Answer · 2013-07-03 19:45:27Z

0

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.

answered Jul 3, 2013 at 19:45

bpeterson76

12.9k6 gold badges51 silver badges82 bronze badges

1 Comment

Raj Nathani Over a year ago

cross origin issues can be solved with jsonp, and besides it seems that the webpage the OP wants to load is from within the same server.

Matthew R. · Accepted Answer · 2013-07-03 20:02:59Z

0

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.

edited Jul 3, 2013 at 20:02

answered Jul 3, 2013 at 19:52

Matthew R.

4,3501 gold badge27 silver badges39 bronze badges

Comments

user2544708 · Accepted Answer · 2013-07-03 19:51:10Z

-3

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

answered Jul 3, 2013 at 19:51

user2544708

932 bronze badges

1 Comment

Giliweed Over a year ago

no. it is 50% possible using this code document.getElementById("content").innerHTML='<object type="type/html" data="music.html" id="link_pages" ></object>'; inside the <div id="content"> tag. but I don't know how to do the rest of the part. So It does work without using <iframe>.

Collectives™ on Stack Overflow

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

5 Answers 5

3 Comments

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related