Partial render in HTML/JavaScript - javascript

I have some HTML files, and each one of them I want to partially render in another HTML file, for example header.html and footer.html in order to observe DRY concept.
HTML files should look like this:
<!--render header.html-->
<div>
Content
</div>
<!--render footer.html-->
How can I do that?

If you're just using plain HTML and Javascript, you could include jQuery and use an AJAX request to load the contend of another HTML page in your main page.
Have a look at the jQuery 'load()' function here:
http://api.jquery.com/load/
Assuming your have the following html:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
your usage would look something like this:
$('#header').load('header.html');
$('#footer').load('footer.html');

Here's a link (first one from Google I might add) that explains how to do this in various languages.
Also note that some IDEs take care of this for you. Dreamweaver being one example; in ASP.NET there are master pages; and so on.
PHP:
<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>
ASP:
<!--#include file="path to file/include-file.html"-->
JS:
JavaScript is another way to include HTML within the pages of your
site. This has the advantage of not requiring server-level
programming. But it's a little more complicated than the server-level
include methods.
Save the HTML for the common elements of your site to a JavaScript
file. Any HTML written in this file, must be printed to the screen
with the document.write function.
Use a script tag to include the
JavaScript file on your pages.
<script type="text/javascript" src="path to file/include-file.js">
Use that same code on
every page that you want to include the file.
PLEASE NOTE that the JS version is NOT ideal.
1. JS may be disabled or unavailable in the browser.
2. The page won't be rendered/loaded all at once.
Also, I don't think DRY really counts for this one. Consider using an IDE that will create page templates for you (like Dreamweaver for example).
If you are brave enough (and a little bit old fashioned) and you can't use any of the above, consider using an iframe for your content:
<html>
<body>
<div>my header</div>
<iframe src="mycontent.html" />
<div>my fooder</div>
</body>
</html>
DISCLAIMER
I would rather cut off my own hands than implement the iframe or JS approach. Give deep consideration towards whether you actually NEED to do this.

If you are looking for a client side only solution that is html/js only you should have a look at AngularJS and its ngInclude syntax.
http://docs.angularjs.org/#!/api/ng.directive:ngInclude

If you are using server-side programming, you can use server-side include else if your host file is an HTML file then you can use html SCRIPT tag to include the header.html and footer.html files. Though, am not sure as to what do you really mean by partially rendering HTML file?

As others said, it looks like it can't be done with HTML alone. Another way it could be done on the server-side, if you are using Java, is with Thymeleaf.
For example, adding a main menu on every page with
<div th:replace="fragments/mainmenu.html"></div> . Then mainmenu.html could just contain a bunch of divs. The fragment doesn't need to be a full HTML page.

Related

Is there a vanilla JavaScript technique for dynamically inserting common code into HTML pages, similar to PHP's include capability?

I have a multi-page HTML site with common code that is reused on each page (for example, navbar code, Analytics, stylesheet imports, etc).
Is there a way to dynamically insert that common code in a manner that achieves the same result as PHP's include capability, and makes the code easier to maintain?
I've seen similar questions but not all seem to speak to what I want to achieve with the site I am working with. For example:
How to inject HTML banner code using Vanilla Javascript? - Stack Overflow
Important: Much of the code I want to insert/import will be <header> code that is necessary to properly render the pages so it will need to be inserted as the page loads.
Any suggestions? Please limit suggestions to vanilla JavaScript. I don't know JQuery at this point and want to try do this with JS.
There are a handful of ways to do what you want, but I think a template engine such as EJS or similar will meet your needs.
Do keep in mind though the implications of doing this client-side. Crawlers and such that don't run JavaScript won't have the benefit of seeing what's supposed to be on your page.
What you should probably be doing instead is running these JavaScript templates server-side, outputting static pages which then can be put on your web server or CDN.
Webpack? You could use a packaging system to fuse all your JS into one file, same for CSS. That way you have only only script and one link to add to each page. But for HTML parts, they would be added with javascript ajax and that shouldn't be a solution...
Why would you have multiple pages at all? Cant you just have one page, then update a certain ( the main part) part of your page with new code content instead of a redirect. ( if you want to see this in action visit http://google.com, http://twitter.com and many many more ). the index.html would then look like this:
<body>
<div id = "nav" >
<a href = "/whatever.html" class = "redirect" > Whatever </a>
</div>
<div id = "main" >
Some content
</div>
<script>
//embed jquery
$(_ => {
$(".redirect").on("click",function(e){
e.preventDefault();
$("#main").load(this.href);
});
});
</script>

How to start script in HTML without <script> tag?

I'm using a low-code development platform called WaveMaker right now, and it gives you the option to customize the "markup" of the page (HTML, but you can't really edit <head>; the whole thing is kind of weird), the Javascript of the page, particularly with events like onpageload, etc., the style of the page (CSS), and the page's variables (JSON). I'm trying to embed Formstack forms, but every time the Markup section encounters a <script> tag, it deletes everything after the end of the tag. This is what the markup page looks like. I contacted support and they seemed to indicate that this was on purpose. Is there any way to make HTML run script included in-line without saying <script>? PS: I would be able to embed using iFrames, but for some reason the iFrames aren't working on the iPhone test program, even though they're working on the simulator.
What you can do is put it inside an HTML event attribute.
<body onload="/*your JS here*/">
</body>
If that does not work, try attaching onload to another HTML element or try one of the other event handlers (though I believe that they should have taken this into account as well)
How about this :
<body onload="javascript:(function(){
// you can place your code here it should run
alert('ok')
})()">
</body>
In Avatao's Senior Web Security Career Path, there is a hacking task, where you need to insert malicious javascript code - but the <script> is tag filtered (other tags aren't). Aenadon's answer gived me one solution:
<body onload="your JS here"> </body>
After submitting that, I checked the official solution, and I found that:
<img src="x" onerror=alert('xss')>

Ability to use a single html that stands as an 'include' to another html page

I was searching around for an answer to this question but I can't seem to find the exact "words" or "phrases" to find relevant answers.
My question is, is it possible to have an ability to use a single html that stands as an "include" to another html page?
Example: Being able to use one file containing CSS styles so the same file can appear on every page of the site automatically that I include it on.
I made a template that has an extension of .html that contains only my header and footer for the whole theme of the site. Normally, I would copy and paste the contents of these templates to each new html page then add in the unique body content for that page.
What I would like to do is make a template that has an extension of .html containing only my header and footer so I can do something like include template.html which automatically would put the content of the template.html page on each page so I don't have to copy and paste each time. I am finding it harder and harder to update/maintain each page of the site that contains the header and footer script because I have to find and replace each instance of those scripts when changes are made and must be propagated throughout the site.
I know that html does not actually have an include function but I think there should be a way around this through other languages such as PHP or even JavaScript? I just am curious if its possible and if so, how?
I think you have a few different options. With PHP you could do something like this:
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>
</body>
</html>
See this link.
With AngularJS you could use something like this:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<div ng-include="'myFile.htm'"></div>
</body>
</html>
See this link.
With just HTML5 you could try something like this:
<object name="foo" type="text/html" data="foo.inc"></object>
See this link.
Does that help answer your question?
What you are asking is possible in differents ways:
frame and iframe
take a look at this two tags
frame : http://www.w3schools.com/tags/tag_frame.asp
iframe : http://www.w3schools.com/tags/tag_iframe.asp
I do not recommend this solution because "frame" is not supported in HTML5 and "iframe" is made to include other website in a website, not part of a website. You will not be able to add CSS/JS to code in "iframe" tag.
back end solution
Depending on what kind of website you are working on you can include other file. For exemple in php:
include('youcode.html');
HTML5 solution
You can also use the "object" tag :
<object width="100%" height="500px" data="snippet.html"></object>
this is probably your best choice, see : http://www.w3schools.com/html/html_object.asp
Enjoy :)
This can't be done via HTML, you can either do a PHP include or use this W3 schools example:
http://www.w3schools.com/howto/howto_html_include.asp
PHP example
template.html rename to template.php
<html>
<?php include template.php ?>
</html>

HTML / jQuery: How to properly include external jQuery file

I am new to JS and programming in general and hope someone can help me with this.
I am currently working on building a website where every page has its separate HTML / PHP file.
jQuery and my global / general JS functions are included in the footer of all these pages through a separate includes file "footer.php".
So far everything works as intended.
Now I have some pages that will use specific jQuery functions so I want to load the corresponding JS only if such a page is loaded.
To do this I saved the corresponding codes in separate JS files (e.g. nameOfExternalJsFile.js) and wrapped everything in there in the following:
$(document).ready(function(){
// ...
});
I then made the following updates to the corresponding PHP pages (example):
<head>
<?php
require_once("includes/header.php");
?>
<!-- here I want to include the specific jQuery functions -->
<script src="includes/js/nameOfExternalJsFile.js"></script>
</head>
<!-- ... -->
<!-- here I include the main JS functions -->
<?php require_once("includes/footer.php"); ?>
I have two concerns with this:
I am not sure if this is the right way of including such files since
I need to have them available on document ready.
I include my main JS in the footer since I was told this improves
performance but can I then include jQuery functions in the header at all ?
Can someone let me know if this is correct or if I should change anything here ?
Many thanks for any help with this.
Wrapping the functions in $(document).ready automatically takes care of this concern. From the JQuery documentation on document.ready.
A page can't be manipulated safely until the document is "ready."
jQuery detects this state of readiness for you. Code included inside
$( document ).ready() will only run once the page Document Object
Model (DOM) is ready for JavaScript code to execute.
Technically it doesn't matter whether you include the scripts in the header or the footer, as long you load JQuery first and your script second.
That said, it's generally recommended that both scripts go just before the closing body tag to increase performance as you suggested. There are some articles that discuss this like this post from performance expert Steve Souders and this guide from the Yahoo! Exceptional Performance team.
You should load the $(document).ready(...) stuff only after you have loaded jQuery, that is, in the footer file, after the jQuery <script> tag, like this :
<script src="includes/js/jQuery.min.js"></script>
<script src="includes/js/nameOfExternalJsFile.js"></script>
It`s good practise to locate all the JS files in the end of the body
<html>
<head></head>
<body>
... Some HTML
<script>SomeScripts</script>
</body>
</html>
</pre>
If you want to be sure that your external scripts are loaded after page load use:
$(function(){
/* Your code from the scripts */
});
You can change the content of footer.php to include /nameOfExternalJsFile.js manually at the bottom of the page. That´s the safest way to do it because you may load jquery before loading others scripts.

How to include html page in another?

I want to make a popup for index.html page. I have a demo, a popup will appear at bottom-right of webpage.
But my demo was wrote by jsp, not html.
<jsp:include page="popup.html" flush="true" ></jsp:include>
It work ok.
But in html, this line not work. I have tried:
<!--#include virtual="popup.html" -->
<!--#include file="popup.html" -->
but no popup appear.
So, Are there anyways to include popup.html. Thanks you!
To use <!--#include, you need to make sure that your web server has Server Side Includes enabled.
You could also use a server-based language like PHP which will do this using functions like readfile().
In pure HTML, I suspect your only option would be to include the second HTML file inside an <iframe>. It's by no means an ideal solution, but if nothing else works, this may.

Categories