Replace a
with another html page with .innerHTML?

Question

I am currently working on a project which allows for different webpages to be loaded into a <div> in my page when certain links leading to them are clicked , I have read up on the thread below but I do not have any idea on how to do jquery and I was wondering if the pages can be loaded with .innerHTML ? Are there ways to do it with only css and javascript and html?

Replace <div> with another HTML page

Basically what I want is something like w3.includeHTML() in which the entire page loads and show itself not within a frame but as part of the page

Here is a link to my project file and the main html page being used is index.html and the html page to linked to is greatwallofchina.html:

https://drive.google.com/file/d/1yAWZIIhBKHjwkiwwNhXUsQEVVQdjTxrM/view?usp=sharing

Yes, you can use the [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) to load data with AJAX and set it in the page with `.innerHTML`. You could also use the new [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) api but it is not well supported yet and requires a [polyfill](https://github.com/github/fetch). — mattdevio, Jan 11 '18 at 06:12
@NavankurChauhan The problem with the tag is that it is unable to work in html5 and it might not be able to run properly on browsers that uses it. — nTIAO, Jan 11 '18 at 06:16
nothing much changes just get to know that id or class of other html page put your design changes in to style tag or by using javascript but do not forget to give "!important", this way you can change in to other html pages — Darshan Dave, Jan 11 '18 at 06:20
Also note if the other web pages are not on the same domain, you will likely run into [Same Origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) issues. — Jon P, Jan 11 '18 at 06:22
Do you want to view another html page inside of one when one clicked and another page when another is clicked? — Jonny, Jan 11 '18 at 06:57

Jonny · Accepted Answer · 2018-01-12T03:47:02.327

2

If you want to show another html inside another use the object element and you can use innerHTML to achieve this. Below are 2 functions for each link one will load one page and the other will load the second. The other option requires you to post your stylesheet Hope it helps. The update to this Solution is to remove the extra scrollbar.

<script type="text/javascript">
function nextpage(){
document.getElementById('pageContent').innerHTML = "<object style=\"overflow:hidden; width: 99.25%; height: 101%\" width=\"100%\" height=\"101%\" data=\"http://localhost/test/page1.php\"></object>" ;
}
function nextpageb(){
document.getElementById('pageContent').innerHTML = "<object style=\"overflow:hidden; width: 99.25%; height: 101%\" width=\"100%\" height=\"101%\"  data=\"http://localhost/test/page2.php\"></object>" ;
}
</script>
</head>
<body style="float:left; overflow:hidden; width: 100%; height: 101%">
<nav>
<h2 class="hidden">Our navigation</h2>
<ul>
<li><a onclick="nextpage();">Home</a></li>
<li><a onclick="nextpageb();">Contact</a></li>
</ul>
</nav>
<div id="pageContent">Hello motto </div>

edited Jan 12 '18 at 03:47

answered Jan 11 '18 at 07:03

Jonny

1,319
1
14
26

i can do a css only solution if you post your style. – Jonny Jan 11 '18 at 07:05
Hi although I am able to put the webpage into the page , it didn't turned out as well as I expected. – nTIAO Jan 12 '18 at 01:30
Here is an image of what I mean: – nTIAO Jan 12 '18 at 01:31
as you can see it is shown that the webpage gets implemented but it only scrolls through the page within its own frame – nTIAO Jan 12 '18 at 01:34
so you want only one scroll bar instead of 2 correct? – Jonny Jan 12 '18 at 03:08
Updated the Solution to remove the extra scroll bar – Jonny Jan 12 '18 at 03:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163088/discussion-between-ntiao-and-jonny). – nTIAO Jan 13 '18 at 06:03

Navankur Chauhan · Answer 2 · 2018-01-11T09:25:26.233

1

You can try loading the page in your div as given below

USING JAVASCRIPT::

<div id="result">
</div>

<script type="text/javascript">
function myFunction() {
document.getElementById("result").innerHTML = '<object type="text/html" data="/path/of/htmlpage.html" ></object>';
}
<script>

USING JQUERY ::

 $(document).ready( function() {
        $("#yourLinkId").on("click", function() {
            $("#YourDiv").load("../pages/PageYouWantToShow.html");
        });
    });

edited Jan 11 '18 at 09:25

answered Jan 11 '18 at 06:20

Navankur Chauhan

407
6
22

The OP is trying to avoid jQuery. Your answer is not significantly different from an already voted down answer. – Jon P Jan 11 '18 at 06:29
added the Js equivalent – Navankur Chauhan Jan 11 '18 at 07:00

score 1 · Answer 3 · answered Jan 11 '18 at 06:31

Do this:

not sure of the format of these "links" if you have access to them then you can use one of a couple of ways

use the HTML and any variant of the following Javascripts (JS)

HTML

<iframe id="myFrameID" src="" width="0px" height="0px" style="display:hidden;visibility: hidden"></iframe>
<div id="myPageViewerDIV"></div>

JS with selectors

$('a[href="formatoflinkhere"]').click(function () { 
    $("#myFrameID").attr("src", $("a:focus").attr("href"));
    $("#myFrameID").bind('load', function() { $("#myPageViewerDIV").html($("#myFrameID").contentDocument); });
    return false;
});

JS with any links

$('a').click(function () { 
    $("#myFrameID").attr("src", $("a:focus").attr("href"));
    $("#myFrameID").bind('load', function() { $("#myPageViewerDIV").html($("#myFrameID").contentDocument); });
    return false;
});

JS with any links but ids (the hash symbol)

$('a[href!=#]').click(function () { 
    $("#myFrameID").attr("src", $("a:focus").attr("href"));
    $("#myFrameID").bind('load', function() { $("#myPageViewerDIV").html($("#myFrameID").contentDocument); });
    return false;
});

you or other users can add on to this ^^/'

what this does:

Creates a hidden invisible IFrame
Binds All Links (or variant type) with the onclick event handler (returns false so no browsing to the link
load the link into the source
binds to the onloaded event of the iframe
copys the iframe's root document to the dive of your choices...

TL;DR

Not tested, should work in theory.

score 0 · Answer 4 · answered Jan 13 '18 at 06:10

0

$(document).ready( function() {
        $("#yourLinkId").on("click", function() {
            $("#YourDiv").load("../pages/PageYouWantToShow.html");
        });
    });

answered Jan 13 '18 at 06:10

Pardeep

2,153
1
17
37

score 0 · Answer 5 · edited Jun 15 '22 at 10:03

0

functionyouFunc(){
document.getElementById("element").innerHTML='<object type="text/html" data="/statics/health.html"</object>'
}

edited Jun 15 '22 at 10:03

Adriaan

17,741
7
42
75

answered Jun 15 '22 at 10:02

kosh

1

4

Welcome to Stack Overflow! Please read [answer] and [edit] your question to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post. – Adriaan Jun 15 '22 at 10:03

score -1 · Answer 6 · edited Jan 13 '18 at 06:09

-1

Its simple - Just call a javascript function on clicking the link and load your html as follows

$("#divid").load('path of file')

edited Jan 13 '18 at 06:09

Hkachhia

4,463
6
41
76

answered Jan 11 '18 at 06:12

Deepak Singh

9
4

2

He is trying to do this w/o jquery. – mattdevio Jan 11 '18 at 06:13

Replace a with another html page with .innerHTML?

6 Answers6

Replace a
with another html page with .innerHTML?