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:
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./file/d/1yAWZIIhBKHjwkiwwNhXUsQEVVQdjTxrM/view?usp=sharing
Share Improve this question edited Jan 13, 2018 at 6:11 nTIAO asked Jan 11, 2018 at 6:08 nTIAOnTIAO 4251 gold badge6 silver badges15 bronze badges 8- May be you can use the fame tag for this – Navankur Chauhan Commented Jan 11, 2018 at 6:12
-
Yes, you can use the XMLHttpRequest to load data with AJAX and set it in the page with
.innerHTML. You could also use the new fetch api but it is not well supported yet and requires a polyfill. – Matt Greenberg Commented Jan 11, 2018 at 6:12 - @NavankurChauhan The problem with the <frame> 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 Commented Jan 11, 2018 at 6: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 Commented Jan 11, 2018 at 6:20
- Also note if the other web pages are not on the same domain, you will likely run into Same Origin issues. – Jon P Commented Jan 11, 2018 at 6:22
6 Answers
Reset to default 2If 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>
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.
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");
});
});
$(document).ready( function() {
$("#yourLinkId").on("click", function() {
$("#YourDiv").load("../pages/PageYouWantToShow.html");
});
});
functionyouFunc(){
document.getElementById("element").innerHTML='<object type="text/html" data="/statics/health.html"</object>'
}
Its simple - Just call a javascript function on clicking the link and load your html as follows
$("#divid").load('path of file')