Link to home
Start Free TrialLog in
Avatar of TheGtrsR1
TheGtrsR1

asked on

Use Javascript to insert an html file

Hi to all,

I am trying to make a link where each page in a lesson is printed instead of the student having to go to each page and click print. I want them to have one place to go. The only solution I have found thus far is to use SSI, and it works great. My only problem is that I need to support everything client side since many of these lessons will go out on CD and thus no server to perform the SSI.

So here is my question, can anyone think of a way to use the already available html files to include for this multi page print?

I figured if there was a way to open an html file with Javascript and write all the contents of the file to a new file and continue to do that one after the other that would work...but, I can't seem to figure out how that would be possible.

Your help much appeciated. Thank You in advance.

Danny
Avatar of php-webdesign
php-webdesign

but i think you will mean this:

..Javascript Includes

The Javascript Include is very similar to the SSI Include in the example above. The differences are in the way the code on our javascript include page is written. For this example we will use the same navigation bar code as used above.

Create a file in your text editor and include the HTML code for the navigation bar. We then add some javascript coding to each line of the HTML code as well as opening and closing javascript tags. The code for the javascript include page will look like this:

      <!--
      document.writeln('<div align="center">');
      document.writeln('<a href="html/index.html">HTML</a> ~');
      document.writeln('<a href="css/index.html">CSS</a> ~');
      document.writeln('<a href="webtools/index.html">Web Tools</a>');
      document.writeln('<br>');
      document.writeln('<a href="tutorials/index.html">Tutorials</a> ~');
      document.writeln('<a href="design/index.html">Design Tips</a> ~');
      document.writeln('<a href="downloads/index.html">Downloads</a>');
      document.writeln('</div>');
      //-->

Note:
The page must begin with <!-- and end with //-->
Each page line must begin with document.writeln('
Each page line must end with ');

Now save the page with a .js file extension, "bot_nav.js".

Now place the following code on the page in the location you want the navigation bar to be rendered.
<script src="bot_nav.js" language="javascript" type="text/javascript">
</script>

Javascript is a very sensitive language, but you can include most HTML or javascript coding on the page. Here are some things to watch for.

   1. you can not include javascript that has to access another file to run. DO NOT include the <script> and </script> tags in the .js file, they are included in the location script code.
   2. if your content contains a backslash "\" it must be preceded by another backslash "\\".
   3. if your content contains an apostrophe (') it must be preceded by a backslash (\').
   4. the most common reasons for script error messages are extra space at the end of a line, or missing characters.

This is the same type of script used to syndicate content for use on other sites. But to code a long article or web design tip by hand would take some time. I used a CGI script called "Master Syndicator" that codes the content for me.

Note: whether using CSS, SSI, or Javascript Include pages be sure to upload them to your site in ASCII mode.

Implimenting one or all three of these "Page Include" methods will make maintaining and adding to your site a lot quicker and easier.
If they are already set up as html pages, just open then in a popup and print from there:

<html>
<head>
     <title>Untitled</title>
  <script>
   var winId=false;
function openWin(target) {
  winId=window.open(target,'printpage','width=200,height=300');
}
function printIt()
{
   if(winId && !winId.closed)
   {
   winId.focus();
   winId.print();
   }
}
</script>
</head>

<body>

<input type="button" value="Print Section 1"
   onClick="createWin('section1.html');setTimeout('printIt()',3000);return false;">
</div>
</body>
</html>

Cd&
Avatar of Willem
COBOLdinosaur has the right solution here..

You can make the pages print better by using CSS to specify what get shown and to change some of the formatting without changing the actual HTML.. just the CSS

But this case I guess is closed..

Nice powerfull scripting there COBOLdinosaur
This would be complex and bulky.

Why not just save the result of the SSI page as a separate file when authoring the CD ?
arantius

I think you posted to the wrong tread dude ..
Avatar of TheGtrsR1

ASKER

First, thank you for your comments so far. What I am trying to accomplish is to have a javascript function which works just like SSI. In other words, I want to take the pages, which are already created (but may change) and input that text into whatever location I want. As for the CD, it will be put out on CD but also needs to be made available on the web. Here is the way I was doing it with SSI:

<body onload="window.print()">

                     <!-- #include virtual="page_00.htm" -->
<p class=breakhere><!-- #include file="page_01.htm" --></p>
<p class=breakhere><!-- #include file="page_02.htm" --></p>
<p class=breakhere><!-- #include file="page_03.htm" --></p>

</body>

the 'class=breakhere' is just a CSS function to make a page break

Hope it is clear,

Danny
ASKER CERTIFIED SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
BTW, using a break style is no guarantee of correct printing.  The user setting and printer setting may or may not result in correct printing.

Cd&