Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #19915 > unrolled thread

How to load common HTML code that include <Script>...</Script> to another HTML

Back to article view | Back to comp.lang.javascript

Contents

  How to load common HTML code that include <Script>...</Script> to another HTML steve nospam <steve.nospamm@gmail.com> - 2013-05-23 22:26 -0700
    Re: How to load common HTML code that include <Script>...</Script> to another HTML steve nospam <steve.nospamm@gmail.com> - 2013-05-23 22:46 -0700
      Re: How to load common HTML code that include <Script>...</Script> to another HTML "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-05-24 09:41 +0200
    Re: How to load common HTML code that include <Script>...</Script> to another HTML Scott Sauyet <scott.sauyet@gmail.com> - 2013-05-24 08:24 -0700
      Re: How to load common HTML code that include <Script>...</Script> to another HTML Dr J R Stockton <reply1300@merlyn.demon.co.uk.invalid> - 2013-05-25 21:17 +0100
    Re: How to load common HTML code that include <Script>...</Script> to another HTML Danny <dann90038@gmail.com> - 2013-05-24 11:53 -0700
      Re: How to load common HTML code that include <Script>...</Script> to another HTML Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-05-24 21:50 +0200
        Re: How to load common HTML code that include <Script>...</Script> to another HTML Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-05-24 22:15 +0200
    Re: How to load common HTML code that include <Script>...</Script> to another HTML JJ <duh@nah.meh> - 2013-05-25 04:16 +0700

#19915 — How to load common HTML code that include <Script>...</Script> to another HTML

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

[toc] | [next] | [standalone]

#19916

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.


On May 24, 12:26 am, steve nospam <steve.nosp...@gmail.com> 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. 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

[toc] | [prev] | [next] | [standalone]

#19917

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.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#19927

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. [ ... ]
>
> 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
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

[toc] | [prev] | [next] | [standalone]

#19957

In comp.lang.javascript message <a2e0362d-6f56-4ab0-96a4-a6a8a963c8b9@g3
g2000yqg.googlegroups.com>, Fri, 24 May 2013 08:24:02, Scott Sauyet
<scott.sauyet@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.

[toc] | [prev] | [next] | [standalone]

#19931

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

[toc] | [prev] | [next] | [standalone]

#19935

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]
> ----------------------------------------
> function fetcher(myfile, mydivID){
>   var xhrObject = new XmlHttpRequest(),

There is no such method; the proper identifier is “XMLHttpRequest”.  So the 
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();
  }

>     }
>   }
>   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 
*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.

[toc] | [prev] | [next] | [standalone]

#19938

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.

> […]
> I think the proper expression is “fail”.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#19940

On Thu, 23 May 2013 22:26:14 -0700 (PDT), 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. 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?

Try below code. Include the SCRIPT tag and put it anywere in the HEAD tag
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>

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web