Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
How to load common HTML code that include <Script>...</Script> to another HTML
15 views
Skip to first unread message
steve nospam
May 24, 2013, 1:26:14 AM5/24/13
to
I'd like to make a file, call it common.htm and inside this file I'll
have many lines that load common javascripts
common.htm
==========
<script src="..."></script>
<script src="..."></script>
<script src="..."></script>
Then in all my other HTML files, I want to load the above file in the
header. Something like
index.htm
==========
<!DOCTYPE html>
<html>
<head>
what do I type here to load common.htm?? =====>>>
</head>
....
This needs to work on the server and also on the PC (i.e. locally)
with no web server running.
Since Javascripts can not have <script> inside them, I can't put this
common code in .js file and load that.
How would one do the above?
cheers,
Steve
have many lines that load common javascripts
common.htm
==========
<script src="..."></script>
<script src="..."></script>
<script src="..."></script>
Then in all my other HTML files, I want to load the above file in the
header. Something like
index.htm
==========
<!DOCTYPE html>
<html>
<head>
what do I type here to load common.htm?? =====>>>
</head>
....
This needs to work on the server and also on the PC (i.e. locally)
with no web server running.
Since Javascripts can not have <script> inside them, I can't put this
common code in .js file and load that.
How would one do the above?
cheers,
Steve
steve nospam
May 24, 2013, 1:46:03 AM5/24/13
to
Just to be clear, I just wanted to add that I do not want to use PHP.
As in
<?php include("common.htm"); ?>
As I want this to work on the client side also. I also do not want to
install web server on my computer to make this work. Only browser. But
I'd like it to work when I upload the file to the web server computer
as well. I hope there is a way to do this.
As in
<?php include("common.htm"); ?>
As I want this to work on the client side also. I also do not want to
install web server on my computer to make this work. Only browser. But
I'd like it to work when I upload the file to the web server computer
as well. I hope there is a way to do this.
Evertjan.
May 24, 2013, 3:41:53 AM5/24/13
to
steve nospam wrote on 24 mei 2013 in comp.lang.javascript:
> Just to be clear, I just wanted to add that I do not want to use PHP.
> As in
>
> <?php include("common.htm"); ?>
>
> As I want this to work on the client side also. I also do not want to
> install web server on my computer to make this work. Only browser. But
> I'd like it to work when I upload the file to the web server computer
> as well. I hope there is a way to do this.
<iframe>, mister Nospam.
> Just to be clear, I just wanted to add that I do not want to use PHP.
> As in
>
> <?php include("common.htm"); ?>
>
> As I want this to work on the client side also. I also do not want to
> install web server on my computer to make this work. Only browser. But
> I'd like it to work when I upload the file to the web server computer
> as well. I hope there is a way to do this.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Scott Sauyet
May 24, 2013, 11:24:02 AM5/24/13
to
steve nospam wrote:
> I'd like to make a file, call it common.htm and inside this file I'll
> have many lines that load common javascripts
>
> common.htm
> ==========
> <script src="..."></script>
> <script src="..."></script>
> <script src="..."></script>
>
> Then in all my other HTML files, I want to load the above file in the
> header. [ ... ]
> I'd like to make a file, call it common.htm and inside this file I'll
> have many lines that load common javascripts
>
> common.htm
> ==========
> <script src="..."></script>
> <script src="..."></script>
> <script src="..."></script>
>
> Then in all my other HTML files, I want to load the above file in the
>
> This needs to work on the server and also on the PC (i.e. locally)
> with no web server running.
>
> Since Javascripts can not have <script> inside them, I can't put this
> common code in .js file and load that.
>
> How would one do the above?
I don't think there's a real solution for you. You can load
> This needs to work on the server and also on the PC (i.e. locally)
> with no web server running.
>
> Since Javascripts can not have <script> inside them, I can't put this
> common code in .js file and load that.
>
> How would one do the above?
additional scripts from Javascript, but if you want to do it from the
local file system, certain browsers prevent you by default (although
there is often an elevated security mode that allows it, such as
running Chrome with the `--allow-file-access-from-files` command line
flag.)
As to dynamic includes, the local file system is not likely to do that
for you! :-)
As Evertjan says, you can include an IFrame, but it doesn't sound as
though that's what you're looking for.
Sorry to be the bearer of bad tidings.
-- Scott
Danny
May 24, 2013, 2:53:46 PM5/24/13
to
to steve nospam
the only more-or-less feasible solution, which I've used btw, is to use an XmlHttprequest() object, to fetch the "content html files" that you'd be dumping in your "template html" file, with all proper ID'ed block-level elements
Bear in mind they do not have to be as .html mimetype, they can be .txt or whatever else, it just have to be valid markup, and also be aware of the issues when using the innerHTML property, innerHTML is great for WRITES, no-so-great for READS, as in when reading or accessing nodes added with it. As opposed to using DOM methods for adding elements/properties, which long-windy as they're, they're quite reliable for WRITE and READS
----------------------------------------
function fetcher(myfile, mydivID){
var xhrObject = new XmlHttpRequest(),
dest = document.getElementById(mydivID);
xhrObject.open('get', myfile, true);
xhrObject.onreadystate = function(){
if (xhrObject.readyState=4) {
dest.innerHTML = xhrObject.responseText;
}
}
xhrObject.send(null);
}
---------------------------------------
then call your "fetcher" function like
fetcher('header.html', 'myheader');
fetcher('footer.html', 'myfooter');
and so on
the only more-or-less feasible solution, which I've used btw, is to use an XmlHttprequest() object, to fetch the "content html files" that you'd be dumping in your "template html" file, with all proper ID'ed block-level elements
Bear in mind they do not have to be as .html mimetype, they can be .txt or whatever else, it just have to be valid markup, and also be aware of the issues when using the innerHTML property, innerHTML is great for WRITES, no-so-great for READS, as in when reading or accessing nodes added with it. As opposed to using DOM methods for adding elements/properties, which long-windy as they're, they're quite reliable for WRITE and READS
----------------------------------------
function fetcher(myfile, mydivID){
var xhrObject = new XmlHttpRequest(),
dest = document.getElementById(mydivID);
xhrObject.open('get', myfile, true);
xhrObject.onreadystate = function(){
if (xhrObject.readyState=4) {
dest.innerHTML = xhrObject.responseText;
}
}
xhrObject.send(null);
}
---------------------------------------
then call your "fetcher" function like
fetcher('header.html', 'myheader');
fetcher('footer.html', 'myfooter');
and so on
Thomas 'PointedEars' Lahn
May 24, 2013, 3:50:36 PM5/24/13
to
Danny wrote:
> to steve nospam
When will you ever learn to at least keep the attribution that your
otherwise completely borken Google Groups automatically inserts for you?
It inserts an attribution novel to be sure, but that is still better than
the nonsense that you post instead. Usenet is _not_ a one-to-one
communications medium. (And you do not really assume that “nospam” is
“steve”'s last name, do you?)
> the only more-or-less feasible solution, which I've used btw, is to use an
> XmlHttprequest() object, to fetch the "content html files" that you'd be
> dumping in your "template html" file, with all proper ID'ed block-level
> elements
>
> Bear in mind they do not have to be as .html mimetype,
“.html” is not a “mimetype”, it is a file/resource name suffix. The MIME
media type for HTML is “text/html”, see RFC 2854 and various HTML
Specifications.
> they can be .txt or whatever else, it just have to be valid markup, and
> also be aware of the issues when using the innerHTML property, innerHTML
> is great for WRITES, no-so-great for READS, as in when reading or
> accessing nodes added with it.
In English: The “innerHTML” property value, when read, is a serialization of
the document subtree associated with the corresponding element. That
serialization is not standardized, therefore not reliable as such. But it
is still compatible within the same user agent, that is, it is safe for
moving content there.
> As opposed to using DOM methods for adding elements/properties, which
> long-windy as they're, they're quite reliable for WRITE and READS
In English: Those methods operate directly on the document tree, and their
outcome is standardized per the W3C DOM Specifications.
> [pretty-printed]
buggy code that you posted does not even run.
> dest = document.getElementById(mydivID);
>
> xhrObject.open('get', myfile, true);
The HTTP verb SHOULD be uppercase.
> xhrObject.onreadystate = function () {
> if (xhrObject.readyState = 4) {
This assigns the value “4” to the “readyState” property, if possible (if
not, that is yet another runtime error). You were looking for a comparison
instead:
if (xhrObject.readyState == 4) {
However, this comparison is insufficient to determine if a response is
useful. It is necessary also to compare against the response status,
because the successfully received response might be an error response (such
as “404 File Not Found”):
if (xhrObject.readyState == 4
&& /\b(0|2\d\d|1223)\b/.test(xhrObject.status)
> dest.innerHTML = xhrObject.responseText;
It makes no sense to retrieve the target object before the response has been
received. Not only is there an unnecessary closure with a host object
(which leaks memory if you are not careful, and you *are* not) but also the
target element might be no longer be available when the response has been
received. Better:
var dest = document.getElementById(mydivID);
if (dest)
{
dest.innerHTML = xhrObject.responseText;
}
The closure makes sure that “mydivID” is available in the inner execution
context. “mydivID” does not store a reference to a host object, but holds a
string value, so there are no potential memory leaks.
BTW, all of this is old news. With JSX:http.js it would be more robust and
efficient in several ways:
var req = new jsx.net.http.HTTPRequest();
function fetcher (myfile, mydivID)
{
req.setURL(myfile);
req.setSuccessListener(function (response) {
var dest = document.getElementById(mydivID);
if (dest)
{
dest.innerHTML = response.responseText;
}
});
req.send();
*not* ”load common HTML code that include <Script>...</Script> to another
HTML” so that the code in the “script” elements or referred by them is
executed, because the “innerHTML” property does not work that way.
I think the proper expression is “fail”.
--
PointedEars
Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.
> to steve nospam
When will you ever learn to at least keep the attribution that your
otherwise completely borken Google Groups automatically inserts for you?
It inserts an attribution novel to be sure, but that is still better than
the nonsense that you post instead. Usenet is _not_ a one-to-one
communications medium. (And you do not really assume that “nospam” is
“steve”'s last name, do you?)
> the only more-or-less feasible solution, which I've used btw, is to use an
> XmlHttprequest() object, to fetch the "content html files" that you'd be
> dumping in your "template html" file, with all proper ID'ed block-level
> elements
>
> Bear in mind they do not have to be as .html mimetype,
media type for HTML is “text/html”, see RFC 2854 and various HTML
Specifications.
> they can be .txt or whatever else, it just have to be valid markup, and
> also be aware of the issues when using the innerHTML property, innerHTML
> is great for WRITES, no-so-great for READS, as in when reading or
> accessing nodes added with it.
the document subtree associated with the corresponding element. That
serialization is not standardized, therefore not reliable as such. But it
is still compatible within the same user agent, that is, it is safe for
moving content there.
> As opposed to using DOM methods for adding elements/properties, which
> long-windy as they're, they're quite reliable for WRITE and READS
outcome is standardized per the W3C DOM Specifications.
> [pretty-printed]
> ----------------------------------------
> function fetcher(myfile, mydivID){
> var xhrObject = new XmlHttpRequest(),
There is no such method; the proper identifier is “XMLHttpRequest”. So the
> function fetcher(myfile, mydivID){
> var xhrObject = new XmlHttpRequest(),
buggy code that you posted does not even run.
> dest = document.getElementById(mydivID);
>
> xhrObject.open('get', myfile, true);
> xhrObject.onreadystate = function () {
> if (xhrObject.readyState = 4) {
This assigns the value “4” to the “readyState” property, if possible (if
not, that is yet another runtime error). You were looking for a comparison
instead:
if (xhrObject.readyState == 4) {
However, this comparison is insufficient to determine if a response is
useful. It is necessary also to compare against the response status,
because the successfully received response might be an error response (such
as “404 File Not Found”):
if (xhrObject.readyState == 4
&& /\b(0|2\d\d|1223)\b/.test(xhrObject.status)
> dest.innerHTML = xhrObject.responseText;
It makes no sense to retrieve the target object before the response has been
received. Not only is there an unnecessary closure with a host object
(which leaks memory if you are not careful, and you *are* not) but also the
target element might be no longer be available when the response has been
received. Better:
var dest = document.getElementById(mydivID);
if (dest)
{
dest.innerHTML = xhrObject.responseText;
}
The closure makes sure that “mydivID” is available in the inner execution
context. “mydivID” does not store a reference to a host object, but holds a
string value, so there are no potential memory leaks.
BTW, all of this is old news. With JSX:http.js it would be more robust and
efficient in several ways:
var req = new jsx.net.http.HTTPRequest();
function fetcher (myfile, mydivID)
{
req.setURL(myfile);
req.setSuccessListener(function (response) {
var dest = document.getElementById(mydivID);
if (dest)
{
dest.innerHTML = response.responseText;
}
});
req.send();
}
> }
> }
> xhrObject.send(null);
> }
> ---------------------------------------
> then call your "fetcher" function like
>
> fetcher('header.html', 'myheader');
> fetcher('footer.html', 'myfooter');
And finally, your suggestion does not even solve the OP's problem: It will
> }
> }
> xhrObject.send(null);
> }
> ---------------------------------------
> then call your "fetcher" function like
>
> fetcher('header.html', 'myheader');
> fetcher('footer.html', 'myfooter');
*not* ”load common HTML code that include <Script>...</Script> to another
HTML” so that the code in the “script” elements or referred by them is
executed, because the “innerHTML” property does not work that way.
I think the proper expression is “fail”.
--
PointedEars
Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.
Thomas 'PointedEars' Lahn
May 24, 2013, 4:15:56 PM5/24/13
to
Thomas 'PointedEars' Lahn wrote:
> Danny wrote:
>> xhrObject.onreadystate = function () {
xhrObject.onreadystatechange = function () {
So the code that you posted is actually just a pile of junk.
> […]
> Danny wrote:
>> xhrObject.onreadystate = function () {
xhrObject.onreadystatechange = function () {
So the code that you posted is actually just a pile of junk.
> […]
JJ
May 24, 2013, 5:16:04 PM5/24/13
to
block. It'll insert the "common.html" contents after that SCRIPT tag (not at
the end of the HEAD tag block).
Note that it loads the "common.html" file (assuming it's accessible from
client side) after the page is loaded, so make sure no other code assume
that the libraries specified in the "common.html" file are already present
at the time the page is loaded. You'll have to use callbacks in those
libraries if you want to be notified that one has been loaded and ready.
<script>
(function() {
var eleScript = document.scripts[document.scripts.length-1];
//eleScript = current script element being executed
function includeCommon() {
//includeCommon = load the "common.html" and
//insert the contents after eleScript
var xhr = new XMLHttpRequest();
function commonLoaded(){
//commonLoaded = insert the contents
//note: no error handlings
if (xhr.readyState === 4) {
eleScript.insertAdjacentHTML("afterend", xhr.responseText);
}
}
xhr.onreadystatechange = commonLoaded;
xhr.open("GET", "common.html", true); //async
xhr.send();
}
addEventListener("DOMContentLoaded", includeCommon, false);
})();
</script>
Dr J R Stockton
May 25, 2013, 4:17:01 PM5/25/13
to
In comp.lang.javascript message <a2e0362d-6f56-4ab0-96a4-a6a8a963c8b9@g3
g2000yqg.googlegroups.com>, Fri, 24 May 2013 08:24:02, Scott Sauyet
<scott....@gmail.com> posted:
> You can load
>additional scripts from Javascript, but if you want to do it from the
>local file system, certain browsers prevent you by default (although
>there is often an elevated security mode that allows it, such as
>running Chrome with the `--allow-file-access-from-files` command line
>flag.)
A useful thing to be told (though I already had a link to a page which
mentions it :={). Tested, works.
> ...
>Sorry to be the bearer of bad tidings.
Glad reader good
Now cited in <http://www.merlyn.demon.co.uk/js-grphx.htm#Status>.
--
(c) John Stockton, nr London, UK. E-mail, see Home Page. Turnpike v6.05.
Website <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.
g2000yqg.googlegroups.com>, Fri, 24 May 2013 08:24:02, Scott Sauyet
<scott....@gmail.com> posted:
> You can load
>additional scripts from Javascript, but if you want to do it from the
>local file system, certain browsers prevent you by default (although
>there is often an elevated security mode that allows it, such as
>running Chrome with the `--allow-file-access-from-files` command line
>flag.)
mentions it :={). Tested, works.
> ...
>Sorry to be the bearer of bad tidings.
Now cited in <http://www.merlyn.demon.co.uk/js-grphx.htm#Status>.
--
(c) John Stockton, nr London, UK. E-mail, see Home Page. Turnpike v6.05.
Website <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.
0 new messages