Loading HTML file with JavaScript vs having long file content?
I'm redesigning application that could be a good fit for SPA. After reviewing the code I found that previous developers used JQuery/JavaScript load() method to include .html files. For example they have header.html and footer.html. On page load .html are loading in div containers. Example:
<!DOCTYPE html>
<html>
<head>
<title>App Home Page</title>
</head>
<body>
// Body content
<script>
$(function () {
$('#header').load('includes/header.html');
$('#footer').load('includes/footer.html');
});
</script>
</body>
</html>
In this case loading .html doesn't have any impact on JavaScript events since none of the elements in these two files have events. In case for example if I put onClick function in one of the elements in header.html that will be a problem. The DOM content will load before script on the bottom of the body tag. I have questions about this methods:
- Is it a good approach to load
.htmlfiles using JavaScript for
this purpose? - Is there any reason to load
.htmlwith JavaScript
other than cleaner code and easier maintenance? - If there are
benefits of loading.htmlwith JavaScript, how to prevent race
condition in case where DOM is loaded before script content?
I'm trying to understand why this approach would be a good option and if that is a good practice now days in Web Development of Single Page Applications. Another thing that I forgot to mention is that I only use front end languages for this project. There is no server-side language involved.
javascript jquery html single-page-application jquery-load
asked Nov 12 at 15:51
espresso_coffee
1,98342043
add a comment |
I'm redesigning application that could be a good fit for SPA. After reviewing the code I found that previous developers used JQuery/JavaScript load() method to include .html files. For example they have header.html and footer.html. On page load .html are loading in div containers. Example:
<!DOCTYPE html>
<html>
<head>
<title>App Home Page</title>
</head>
<body>
// Body content
<script>
$(function () {
$('#header').load('includes/header.html');
$('#footer').load('includes/footer.html');
});
</script>
</body>
</html>
In this case loading .html doesn't have any impact on JavaScript events since none of the elements in these two files have events. In case for example if I put onClick function in one of the elements in header.html that will be a problem. The DOM content will load before script on the bottom of the body tag. I have questions about this methods:
- Is it a good approach to load
.htmlfiles using JavaScript for
this purpose? - Is there any reason to load
.htmlwith JavaScript
other than cleaner code and easier maintenance? - If there are
benefits of loading.htmlwith JavaScript, how to prevent race
condition in case where DOM is loaded before script content?
I'm trying to understand why this approach would be a good option and if that is a good practice now days in Web Development of Single Page Applications. Another thing that I forgot to mention is that I only use front end languages for this project. There is no server-side language involved.
javascript jquery html single-page-application jquery-load
asked Nov 12 at 15:51
espresso_coffee
1,98342043
try with $( window ).load(function() { // Run code });
– Bryro
Nov 12 at 17:30
add a comment |
I'm redesigning application that could be a good fit for SPA. After reviewing the code I found that previous developers used JQuery/JavaScript load() method to include .html files. For example they have header.html and footer.html. On page load .html are loading in div containers. Example:
<!DOCTYPE html>
<html>
<head>
<title>App Home Page</title>
</head>
<body>
// Body content
<script>
$(function () {
$('#header').load('includes/header.html');
$('#footer').load('includes/footer.html');
});
</script>
</body>
</html>
In this case loading .html doesn't have any impact on JavaScript events since none of the elements in these two files have events. In case for example if I put onClick function in one of the elements in header.html that will be a problem. The DOM content will load before script on the bottom of the body tag. I have questions about this methods:
- Is it a good approach to load
.htmlfiles using JavaScript for
this purpose? - Is there any reason to load
.htmlwith JavaScript
other than cleaner code and easier maintenance? - If there are
benefits of loading.htmlwith JavaScript, how to prevent race
condition in case where DOM is loaded before script content?
I'm trying to understand why this approach would be a good option and if that is a good practice now days in Web Development of Single Page Applications. Another thing that I forgot to mention is that I only use front end languages for this project. There is no server-side language involved.
javascript jquery html single-page-application jquery-load
asked Nov 12 at 15:51
espresso_coffee
1,98342043
I'm redesigning application that could be a good fit for SPA. After reviewing the code I found that previous developers used JQuery/JavaScript load() method to include .html files. For example they have header.html and footer.html. On page load .html are loading in div containers. Example:
<!DOCTYPE html>
<html>
<head>
<title>App Home Page</title>
</head>
<body>
// Body content
<script>
$(function () {
$('#header').load('includes/header.html');
$('#footer').load('includes/footer.html');
});
</script>
</body>
</html>
In this case loading .html doesn't have any impact on JavaScript events since none of the elements in these two files have events. In case for example if I put onClick function in one of the elements in header.html that will be a problem. The DOM content will load before script on the bottom of the body tag. I have questions about this methods:
- Is it a good approach to load
.htmlfiles using JavaScript for
this purpose? - Is there any reason to load
.htmlwith JavaScript
other than cleaner code and easier maintenance? - If there are
benefits of loading.htmlwith JavaScript, how to prevent race
condition in case where DOM is loaded before script content?
I'm trying to understand why this approach would be a good option and if that is a good practice now days in Web Development of Single Page Applications. Another thing that I forgot to mention is that I only use front end languages for this project. There is no server-side language involved.
javascript jquery html single-page-application jquery-load
javascript jquery html single-page-application jquery-load
asked Nov 12 at 15:51
espresso_coffee
1,98342043
asked Nov 12 at 15:51
espresso_coffee
1,98342043
edited Nov 12 at 15:56
asked Nov 12 at 15:51
espresso_coffee
1,98342043
asked Nov 12 at 15:51
espresso_coffee
1,98342043
asked Nov 12 at 15:51
espresso_coffee
1,98342043
1,98342043
try with $( window ).load(function() { // Run code });
– Bryro
Nov 12 at 17:30
add a comment |
try with $( window ).load(function() { // Run code });
– Bryro
Nov 12 at 17:30
try with $( window ).load(function() { // Run code });
– Bryro
Nov 12 at 17:30
try with $( window ).load(function() { // Run code });
– Bryro
Nov 12 at 17:30
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53265663%2floading-html-file-with-javascript-vs-having-long-file-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53265663%2floading-html-file-with-javascript-vs-having-long-file-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
try with $( window ).load(function() { // Run code });
– Bryro
Nov 12 at 17:30