f



create a web page with javascript on fly

Hi,

Is that posible to create a web page completely with javascript and open it
without request to server? Please show a simple sample. Thanks in advance!

Jack


0
datactrl
10/8/2004 2:35:43 AM
comp.lang.javascript 38370 articles. 2 followers. javascript4 (1315) is leader. Post Follow

16 Replies
650 Views

Similar Articles

[PageSpeed] 37

datactrl said:
>
>Hi,
>
>Is that posible to create a web page completely with javascript and open it
>without request to server? Please show a simple sample. Thanks in advance!

Sure it is, but it has to be loaded from someplace, and it's also very
simple to store a complete web page on the local disk.  What, exactly,
are you looking for?

0
Lee
10/8/2004 2:52:36 AM
"datactrl" <quals@tpg.com.au> wrote in message
news:4165fd00$1@dnews.tpgi.com.au...
> Hi,
>
> Is that posible to create a web page completely with javascript and open
it
> without request to server? Please show a simple sample. Thanks in advance!
>
> Jack
>

A Web page is delivered by a Web server....

Of course you can create a file with an .htm (or .html) extension and
double-click on it in Windows Explorer and it will open.  No JavaScript is
necessary to do this; for example:

<html>
<head>
<title>test1.htm</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

You can create a page using JavaScript:

<html>
<head>
<title>test2.htm<title>
<script type="text/javascript">
    var htm  = "<html>";
        htm += "<head>";
        htm += "<title>test3.htm;
        htm += "</head>";
        htm += "<body>";
        htm += "<h1>Hello World</h1>";
        htm += "</body>";
        htm += "</html>";
    document.write(htm);
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

Does this answer your question?  If not please clarify.


0
McKirahan
10/8/2004 2:59:46 AM
"McKirahan" <News@McKirahan.com> wrote in message
news:Con9d.352861$Fg5.74302@attbi_s53...
> "datactrl" <quals@tpg.com.au> wrote in message
> news:4165fd00$1@dnews.tpgi.com.au...
> > Hi,
> >
> > Is that posible to create a web page completely with javascript and open
> it
> > without request to server? Please show a simple sample. Thanks in
advance!
> >
> > Jack
> >
>
> A Web page is delivered by a Web server....
>
> Of course you can create a file with an .htm (or .html) extension and
> double-click on it in Windows Explorer and it will open.  No JavaScript is
> necessary to do this; for example:
>
> <html>
> <head>
> <title>test1.htm</title>
> </head>
> <body>
> <h1>Hello World</h1>
> </body>
> </html>
>
> You can create a page using JavaScript:
>
> <html>
> <head>
> <title>test2.htm<title>
> <script type="text/javascript">
>     var htm  = "<html>";
>         htm += "<head>";
>         htm += "<title>test3.htm;
>         htm += "</head>";
>         htm += "<body>";
>         htm += "<h1>Hello World</h1>";
>         htm += "</body>";
>         htm += "</html>";
>     document.write(htm);
> </script>
> </head>
> <body>
> <h1>Hello World</h1>
> </body>
> </html>
>
> Does this answer your question?  If not please clarify.
>

Of course
            htm += "<title>test3.htm;
should have been
            htm += "<title>test3.htm</title>";


Here's another possibility.

    var htm  = "<html>";
        htm += "<head>";
        htm += "<title>test4.htm</title>";
        htm += "</head>";
        htm += "<body>";
        htm += "<h1>Hello World</h1>";
        htm += "</body>";
        htm += "</html>";
    var oIE = new ActiveXObject("InternetExplorer.Application");
        oIE.visible = true;
        oIE.navigate("about:blank");
        oIE.document.open;
        oIE.document.write(htm);
        oIE.document.close;


0
McKirahan
10/8/2004 3:12:33 AM
Thanks a lot, McKirahan. The last one is what I want. I would like to pop up
a web page which is completely created by the original page with javascript.
How about if I want to use showModelessDialog() to open it, is that
possible? Thanks again !

Jack

"McKirahan" <News@McKirahan.com> wrote in message
news:BAn9d.209130$D%.75621@attbi_s51...
> "McKirahan" <News@McKirahan.com> wrote in message
> news:Con9d.352861$Fg5.74302@attbi_s53...
> > "datactrl" <quals@tpg.com.au> wrote in message
> > news:4165fd00$1@dnews.tpgi.com.au...
> > > Hi,
> > >
> > > Is that posible to create a web page completely with javascript and
open
> > it
> > > without request to server? Please show a simple sample. Thanks in
> advance!
> > >
> > > Jack
> > >
> >
> > A Web page is delivered by a Web server....
> >
> > Of course you can create a file with an .htm (or .html) extension and
> > double-click on it in Windows Explorer and it will open.  No JavaScript
is
> > necessary to do this; for example:
> >
> > <html>
> > <head>
> > <title>test1.htm</title>
> > </head>
> > <body>
> > <h1>Hello World</h1>
> > </body>
> > </html>
> >
> > You can create a page using JavaScript:
> >
> > <html>
> > <head>
> > <title>test2.htm<title>
> > <script type="text/javascript">
> >     var htm  = "<html>";
> >         htm += "<head>";
> >         htm += "<title>test3.htm;
> >         htm += "</head>";
> >         htm += "<body>";
> >         htm += "<h1>Hello World</h1>";
> >         htm += "</body>";
> >         htm += "</html>";
> >     document.write(htm);
> > </script>
> > </head>
> > <body>
> > <h1>Hello World</h1>
> > </body>
> > </html>
> >
> > Does this answer your question?  If not please clarify.
> >
>
> Of course
>             htm += "<title>test3.htm;
> should have been
>             htm += "<title>test3.htm</title>";
>
>
> Here's another possibility.
>
>     var htm  = "<html>";
>         htm += "<head>";
>         htm += "<title>test4.htm</title>";
>         htm += "</head>";
>         htm += "<body>";
>         htm += "<h1>Hello World</h1>";
>         htm += "</body>";
>         htm += "</html>";
>     var oIE = new ActiveXObject("InternetExplorer.Application");
>         oIE.visible = true;
>         oIE.navigate("about:blank");
>         oIE.document.open;
>         oIE.document.write(htm);
>         oIE.document.close;
>
>


0
datactrl
10/8/2004 4:08:18 AM
  Have a search for a message subject "writing slabs of htm".
  It was conclusively shown by Lasse that it is much quicker
  to write HTML as elements in array, then use join("") to
  concatenate them before writing to the page.  The length of
  time taken using += verus join() is exponentially longer,
  getting seriously long for big pages.

  There is an example of how to use it below.

  Of course, if your content is only small...

  Cheers, Rob.

<html>
<head>
<title>Slabs of HTML</title>
</head>
<body>
<script type="text/javascript">
var a = [];
var i = 0;
a[0]   = " <p>here is paragraph " + i + "</p>";
a[++i] = " <p>here is paragraph " + i + "</p>";
a[++i] = " <p>here is paragraph " + i + "</p>";
a[++i] = " <table border='1' cellpadding='5' cellspacing='10'>";
a[++i] = "  <tr>";
a[++i] = "    <td>This is a cell</td>";
a[++i] = "    <td>another cell</td>";
a[++i] = "  </tr>";
a[++i] = "  <tr>";
a[++i] = "    <td>This is a cell</td>";
a[++i] = "    <td>another cell</td>";
a[++i] = "  </tr>";
a[++i] = "  <tr>";
a[++i] = "    <td colspan='2' align='center'>";
a[++i] = "    <form name='fred' action=''>";
a[++i] = "      <input type='text' name='aTxt' width='50'>";
a[++i] = "      <input type='button' value='click me'"
                 + " 
onclick=\"alert(this.form.aTxt.value);\"><br>";
a[++i] = "      <input type='reset' value='Reset'>";
a[++i] = "    </form>";
a[++i] = "    </td>";
a[++i] = "  </tr>";
a[++i] = "</table>";

var s = a.join("");

document.write(s);

</script>
</body>
</html>
0
RobG
10/8/2004 5:27:16 AM
Thank's Rob. My question is that I would like to popup a web page from an
already displayed page. And the popup page would like to be created from the
already displayed page with javascript. I think the way using
document.write() will change the content of already displayed page. That is
not the question.

I've tried 'new ActiveXObject("InternetExplorer.Application");' sample
provided by McKirahan. I think that would let me open an another window for
the created page. But I got an "automation error" when I run this sample.
Don't know what it is.

Jack


"RobG" <rgqld@iinet.net.auau> wrote in message
news:Uyp9d.1962$aA.60695@news.optus.net.au...
>   Have a search for a message subject "writing slabs of htm".
>   It was conclusively shown by Lasse that it is much quicker
>   to write HTML as elements in array, then use join("") to
>   concatenate them before writing to the page.  The length of
>   time taken using += verus join() is exponentially longer,
>   getting seriously long for big pages.
>
>   There is an example of how to use it below.
>
>   Of course, if your content is only small...
>
>   Cheers, Rob.
>
> <html>
> <head>
> <title>Slabs of HTML</title>
> </head>
> <body>
> <script type="text/javascript">
> var a = [];
> var i = 0;
> a[0]   = " <p>here is paragraph " + i + "</p>";
> a[++i] = " <p>here is paragraph " + i + "</p>";
> a[++i] = " <p>here is paragraph " + i + "</p>";
> a[++i] = " <table border='1' cellpadding='5' cellspacing='10'>";
> a[++i] = "  <tr>";
> a[++i] = "    <td>This is a cell</td>";
> a[++i] = "    <td>another cell</td>";
> a[++i] = "  </tr>";
> a[++i] = "  <tr>";
> a[++i] = "    <td>This is a cell</td>";
> a[++i] = "    <td>another cell</td>";
> a[++i] = "  </tr>";
> a[++i] = "  <tr>";
> a[++i] = "    <td colspan='2' align='center'>";
> a[++i] = "    <form name='fred' action=''>";
> a[++i] = "      <input type='text' name='aTxt' width='50'>";
> a[++i] = "      <input type='button' value='click me'"
>                  + "
> onclick=\"alert(this.form.aTxt.value);\"><br>";
> a[++i] = "      <input type='reset' value='Reset'>";
> a[++i] = "    </form>";
> a[++i] = "    </td>";
> a[++i] = "  </tr>";
> a[++i] = "</table>";
>
> var s = a.join("");
>
> document.write(s);
>
> </script>
> </body>
> </html>


0
datactrl
10/8/2004 2:19:29 PM
JRS:  In article <Uyp9d.1962$aA.60695@news.optus.net.au>, dated Fri, 8
Oct 2004 05:27:16, seen in news:comp.lang.javascript, RobG
<rgqld@iinet.net.auau> posted :

>var a = [];
>var i = 0;
>a[0]   = " <p>here is paragraph " + i + "</p>";
>a[++i] = " <p>here is paragraph " + i + "</p>";
>a[++i] = " <p>here is paragraph " + i + "</p>";

If you use i++ rather than ++i, then the first line can have the same
LHS as the rest, and the first para will be paragraph 1 - ISTM.

How about
        var s = [
          " <p>here is paragraph " + 1 + "</p>",
          " <p>here is paragraph     2    </p>",
          " <p>here is paragraph     3    </p>",
          ...
          "" ].join("") ;       

taking the view that self-numbering paragraphs are probably not needed?

The empty string is to allow the previous line to end, like the rest,
with a comma, which seems nicer. 

I've not tested for speed.
 
-- 
 � John Stockton, Surrey, UK.  ?@merlyn.demon.co.uk   Turnpike v4.00   IE 4 �
 <URL:http://www.jibbering.com/faq/>  JL/RC: FAQ of news:comp.lang.javascript 
 <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
 <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
0
Dr
10/8/2004 2:50:57 PM
datactrl wrote:

> Thank's Rob. My question is that I would like to popup a web page from an
> already displayed page. And the popup page would like to be created from the
> already displayed page with javascript. I think the way using
> document.write() will change the content of already displayed page. That is
> not the question.

If you want to open a modal dialog from the newly generated page, just include an onLoad evend in 
<body> tag:

....
a[0] = "<body onLoad='javascript:showModalDialog(<your parameters>)'>"
....
a[<last>] = "</body>"


> I've tried 'new ActiveXObject("InternetExplorer.Application");' sample
> provided by McKirahan. I think that would let me open an another window for
> the created page. But I got an "automation error" when I run this sample.
> Don't know what it is.
> 

It should be a security issue, if you run this from a web server, which is not on your local 
machine. So if you want to have a web server where clients access remotely, you shouldn't use 
ActiveXObject - just use document.write.


> Jack
> 
> 
> "RobG" <rgqld@iinet.net.auau> wrote in message
> news:Uyp9d.1962$aA.60695@news.optus.net.au...
> 
>>  Have a search for a message subject "writing slabs of htm".
>>  It was conclusively shown by Lasse that it is much quicker
>>  to write HTML as elements in array, then use join("") to
>>  concatenate them before writing to the page.  The length of
>>  time taken using += verus join() is exponentially longer,
>>  getting seriously long for big pages.
>>
>>  There is an example of how to use it below.
>>
>>  Of course, if your content is only small...
>>
>>  Cheers, Rob.
>>
>><html>
>><head>
>><title>Slabs of HTML</title>
>></head>
>><body>
>><script type="text/javascript">
>>var a = [];
>>var i = 0;
>>a[0]   = " <p>here is paragraph " + i + "</p>";
>>a[++i] = " <p>here is paragraph " + i + "</p>";
>>a[++i] = " <p>here is paragraph " + i + "</p>";
>>a[++i] = " <table border='1' cellpadding='5' cellspacing='10'>";
>>a[++i] = "  <tr>";
>>a[++i] = "    <td>This is a cell</td>";
>>a[++i] = "    <td>another cell</td>";
>>a[++i] = "  </tr>";
>>a[++i] = "  <tr>";
>>a[++i] = "    <td>This is a cell</td>";
>>a[++i] = "    <td>another cell</td>";
>>a[++i] = "  </tr>";
>>a[++i] = "  <tr>";
>>a[++i] = "    <td colspan='2' align='center'>";
>>a[++i] = "    <form name='fred' action=''>";
>>a[++i] = "      <input type='text' name='aTxt' width='50'>";
>>a[++i] = "      <input type='button' value='click me'"
>>                 + "
>>onclick=\"alert(this.form.aTxt.value);\"><br>";
>>a[++i] = "      <input type='reset' value='Reset'>";
>>a[++i] = "    </form>";
>>a[++i] = "    </td>";
>>a[++i] = "  </tr>";
>>a[++i] = "</table>";
>>
>>var s = a.join("");
>>
>>document.write(s);
>>
>></script>
>></body>
>></html>
> 
> 
> 
0
Andrey
10/8/2004 3:03:42 PM
datactrl wrote:
> Thank's Rob. My question is that I would like to popup a web page from an
> already displayed page. And the popup page would like to be created from the
> already displayed page with javascript. I think the way using
> document.write() will change the content of already displayed page. That is
> not the question.
[snip]

If you want the content in a new window, then create a new window called 
(say) newWindow and write to it:

  newWindow = window.open('','Window Title','parameters....');

  ...

  slabs of HTML

  ...

  newWindow.document.write(s);



Then the HTML appears in newWindow, not the current one.


Cheers, Rob.
0
RobG
10/8/2004 3:46:01 PM
RobG said:
>
>datactrl wrote:
>> Thank's Rob. My question is that I would like to popup a web page from an
>> already displayed page. And the popup page would like to be created from the
>> already displayed page with javascript. I think the way using
>> document.write() will change the content of already displayed page. That is
>> not the question.
>[snip]
>
>If you want the content in a new window, then create a new window called 
>(say) newWindow and write to it:
>
>  newWindow = window.open('','Window Title','parameters....');
>
>  ...
>
>  slabs of HTML
>
>  ...
>
>  newWindow.document.write(s);
>
>
>
>Then the HTML appears in newWindow, not the current one.

Sometimes.  But sometimes you get an error because newWindow.document
has no properties, because the O/S hasn't opened the new window fast
enough, so you're trying to write into a window that isn't ready.

  globalHTML=s;
  window.open("javascript:opener.globalHTML");

is more reliable.

0
Lee
10/8/2004 4:01:34 PM
Now I do as following:
<html>
<head>
<title>pop up a window on fly</title>
<script type="text/javascript">
//function PopUpWindow(){
 var sHtm = ["<html>",
  "<head>",
  "<title>popup htm</title>",
  "</head>",
  "<body>",
  "<h1>Hello World</h1>",
  "</body>",
  "</html>"].join("");
// var s1 =
"dialogHeight=160px;dialogWidth=300px;help=no;status=no;resizeable=no";
// window.showModelessDialog("javascript:opener.sHtm","",s1);
 window.open("javascript:opener.sHtm");
//}
</script>
</head>
<body>
<p>This is the calling window</P>
<button onClick="PopUpWindow()">popup</button>
</body>
</html>

This one works. But if I use button click to run PopUupWindow() or use
showModelessDialog() it won't work at all.

Jack


0
datactrl
10/9/2004 4:24:10 AM
datactrl said:
>
>Now I do as following:
><html>
><head>
><title>pop up a window on fly</title>
><script type="text/javascript">
>//function PopUpWindow(){
> var sHtm = ["<html>",
>  "<head>",
>  "<title>popup htm</title>",
>  "</head>",
>  "<body>",
>  "<h1>Hello World</h1>",
>  "</body>",
>  "</html>"].join("");
>// var s1 =
>"dialogHeight=160px;dialogWidth=300px;help=no;status=no;resizeable=no";
>// window.showModelessDialog("javascript:opener.sHtm","",s1);
> window.open("javascript:opener.sHtm");
>//}
></script>
></head>
><body>
><p>This is the calling window</P>
><button onClick="PopUpWindow()">popup</button>
></body>
></html>
>
>This one works. But if I use button click to run PopUupWindow() or use
>showModelessDialog() it won't work at all.

Because you've made sHtm *local* to the function PopUpWindow().
In order to work, it must be a *global* variable.
Get rid of the "var" keyword.

0
Lee
10/9/2004 6:48:28 AM
> Because you've made sHtm *local* to the function PopUpWindow().
> In order to work, it must be a *global* variable.
> Get rid of the "var" keyword.


Thanks a lot Lee. Once sHtm is made as global it works. By the way, how
about using ShowModalDialog() or showModelessDialog(). It always showed
"error: opener.sHtm is null or not an object".

Jack


0
datactrl
10/9/2004 8:10:43 AM
datactrl wrote:
[snip]
> Thanks a lot Lee. Once sHtm is made as global it works. By the way, how
> about using ShowModalDialog() or showModelessDialog(). It always showed
> "error: opener.sHtm is null or not an object".
[snip]

  Those are IE only functions and are therefore shunned by
  anyone wishing to create platform independent code - which,
  after all, was the point of the internet and WWW in the
  first place.

Cheers, Rob.
0
RobG
10/10/2004 10:11:45 PM
Dr John Stockton wrote:

[snip]
> If you use i++ rather than ++i, then the first line can have the same
> LHS as the rest, and the first para will be paragraph 1 - ISTM.
> 
> How about
>         var s = [
>           " <p>here is paragraph " + 1 + "</p>",
>           " <p>here is paragraph     2    </p>",
>           " <p>here is paragraph     3    </p>",
>           ...
>           "" ].join("") ;       
> 
> taking the view that self-numbering paragraphs are probably not needed?

Looks great.  I auto-numbered the paras just for the sake of 
it, no real purpose.

Rob.
0
RobG
10/10/2004 10:20:31 PM
> Sometimes.  But sometimes you get an error because newWindow.document
> has no properties, because the O/S hasn't opened the new window fast
> enough, so you're trying to write into a window that isn't ready.
>
>   globalHTML=s;
>   window.open("javascript:opener.globalHTML");
>
> is more reliable.

This works fine. But sometimes it will open a blank window without any
content. Is there any way to work arround this problem? Thanks in advance!

Jack


0
datactrl
10/12/2004 9:17:27 AM
Reply: