'Include'ing another file and using variables

  • Thread starter Thread starter Bill
  • Start date Start date
B

Bill

Is there any way to include html code from another file. I would like to put
things common to every page in a separate file and include them into each
page. Then if I want to change that common code I only have to change in one
place.

There is one variable item in my common code that I would need to handle.
Can I create a variable and give it a value before I include the common
code? The common code would then need to display text from the variable
rather than hard coded text.

Thanks,
 
Excellent. I had just made the file with the HTML text I wanted to include.
When I followed you instructions it converted that page by adding a header
and strangely converting all '<' to '&lt;', etc. (at least I assume that
step did it.) But copying back my desired code into the file made it work
fine. Thanks.

How about the variable thing? My included html code contains the visible
title of the page and that part shuold be different on each page, yet it is
buried halfway through the included code. I would like to set a variable on
the line before I include the file and have the file use that variable.
 
Not possible. When using the FP Include Page component only the content that is between the open and
close body tag is included in other pages between there open and close body tags.

You can use Server-Side Includes if allowed by your web host to do what you want, however you may
have to change the file extensions on all your page and then you would not be able to use any of the
FP run-time component.

--
==============================================
Thomas A. Rowe
Microsoft MVP - FrontPage
==============================================
Agents Real Estate Listing Network
http://www.NReal.com
==============================================
 
How can I check if SSI is supported on a server and how would I implement
the include (with variable support) if it is?
 
Bill said:
Excellent. I had just made the file with the HTML text I wanted to
include. When I followed you instructions it converted that page by
adding a header and strangely converting all '<' to '&lt;', etc. (at
least I assume that step did it.) But copying back my desired code
into the file made it work fine. Thanks.

How about the variable thing? My included html code contains the
visible title of the page and that part shuold be different on each
page, yet it is buried halfway through the included code. I would
like to set a variable on the line before I include the file and have
the file use that variable.
Click to expand...

Well, this idea has nothing to with includes, but it will work just as well with a page that has included code inside it

When calling the page from a link, use:
<a href="pagex.html?parm1=fred&parm2=sue">Call page x</a>.

Inside the page pagex.html, you can extract these parameters using this code in the <head> section:
<script type="text/javascript">
function qsobj(parm)
{
var qpairs = document.location.search.substring(1).split("&")
var qvbl = qpairs[parm].split("=")
return qvbl[1] ? unescape(qvbl[1].replace(/%20|\ +/g," ")) : null
}
parm1=qsobj(0)
parm2=qsobj(1)
</script>

Then you can use JS to wite the contents
E.g. this will write a heading containing parm1

<h1>
<script type="text/javascript">document.write(parm1)</script>
</h1>

Because I have posted codes here before without trying it (and then felt stupid), I just tested it, and here is the code
callpagex.html
=========
<html>
<head>
</head>
<body>
<a href="pagex.html?parm1=fred&parm2=sue">Call page x</a>.
</body>
</html>

pagex.html
========
<html>
<head>
<script type="text/javascript">
function qsobj(parm)
{
var qpairs = document.location.search.substring(1).split("&")
var qvbl = qpairs[parm].split("=")
return qvbl[1] ? unescape(qvbl[1].replace(/%20|\ +/g," ")) : null
}
parm1=qsobj(0)
parm2=qsobj(1)
</script>
</head>
<body>
<h1>
<script type="text/javascript">document.write(parm1)</script>
</h1>
</body>
</html>

Clicking on "Call page x" gives this result in large bold type
fred

I hope you can adapt this to what you are wanting to do.
If you have problems, post your code and I will try to adapt it using this idea
 
You would contact your web host and ask.

You would have to ask what server-side scripting is supported by your web host, then learn how to
write the script needed to support what you want to do.

--
==============================================
Thomas A. Rowe
Microsoft MVP - FrontPage
==============================================
Agents Real Estate Listing Network
http://www.NReal.com
==============================================
 
Trevor,

I was able to get your suggestion to work. But I have to click on the link
which then opens the other page. I would like the included page to be
displayed on the including page where the include 'statement' is located. Is
there any way to combine your suggestion with the <!--webbot bot="Include"
U-Include="header.htm" TAG="BODY" --> suggestion of Steve Easton?

Thanks,

Bill


Trevor L. said:
Bill said:
Excellent. I had just made the file with the HTML text I wanted to
include. When I followed you instructions it converted that page by
adding a header and strangely converting all '<' to '&lt;', etc. (at
least I assume that step did it.) But copying back my desired code
into the file made it work fine. Thanks.

How about the variable thing? My included html code contains the
visible title of the page and that part shuold be different on each
page, yet it is buried halfway through the included code. I would
like to set a variable on the line before I include the file and have
the file use that variable.
Click to expand...

Well, this idea has nothing to with includes, but it will work just as
well with a page that has included code inside it

When calling the page from a link, use:
<a href="pagex.html?parm1=fred&parm2=sue">Call page x</a>.

Inside the page pagex.html, you can extract these parameters using this
code in the <head> section:
<script type="text/javascript">
function qsobj(parm)
{
var qpairs = document.location.search.substring(1).split("&")
var qvbl = qpairs[parm].split("=")
return qvbl[1] ? unescape(qvbl[1].replace(/%20|\ +/g," ")) : null
}
parm1=qsobj(0)
parm2=qsobj(1)
</script>

Then you can use JS to wite the contents
E.g. this will write a heading containing parm1

<h1>
<script type="text/javascript">document.write(parm1)</script>
</h1>

Because I have posted codes here before without trying it (and then felt
stupid), I just tested it, and here is the code
callpagex.html
=========
<html>
<head>
</head>
<body>
<a href="pagex.html?parm1=fred&parm2=sue">Call page x</a>.
</body>
</html>

pagex.html
========
<html>
<head>
<script type="text/javascript">
function qsobj(parm)
{
var qpairs = document.location.search.substring(1).split("&")
var qvbl = qpairs[parm].split("=")
return qvbl[1] ? unescape(qvbl[1].replace(/%20|\ +/g," ")) : null
}
parm1=qsobj(0)
parm2=qsobj(1)
</script>
</head>
<body>
<h1>
<script type="text/javascript">document.write(parm1)</script>
</h1>
</body>
</html>

Clicking on "Call page x" gives this result in large bold type
fred

I hope you can adapt this to what you are wanting to do.
If you have problems, post your code and I will try to adapt it using this
idea
Click to expand...
 
No, as the FP Include is a design-time component (content included when page is saved), not a
run-time component.

--
==============================================
Thomas A. Rowe
Microsoft MVP - FrontPage
==============================================
Agents Real Estate Listing Network
http://www.NReal.com
==============================================


Bill said:
Trevor,

I was able to get your suggestion to work. But I have to click on the link which then opens the
other page. I would like the included page to be displayed on the including page where the include
'statement' is located. Is there any way to combine your suggestion with the <!--webbot
bot="Include" U-Include="header.htm" TAG="BODY" --> suggestion of Steve Easton?

Thanks,

Bill


Trevor L. said:
Bill said:
Excellent. I had just made the file with the HTML text I wanted to
include. When I followed you instructions it converted that page by
adding a header and strangely converting all '<' to '&lt;', etc. (at
least I assume that step did it.) But copying back my desired code
into the file made it work fine. Thanks.

How about the variable thing? My included html code contains the
visible title of the page and that part shuold be different on each
page, yet it is buried halfway through the included code. I would
like to set a variable on the line before I include the file and have
the file use that variable.
Click to expand...

Well, this idea has nothing to with includes, but it will work just as well with a page that has
included code inside it

When calling the page from a link, use:
<a href="pagex.html?parm1=fred&parm2=sue">Call page x</a>.

Inside the page pagex.html, you can extract these parameters using this code in the <head>
section:
<script type="text/javascript">
function qsobj(parm)
{
var qpairs = document.location.search.substring(1).split("&")
var qvbl = qpairs[parm].split("=")
return qvbl[1] ? unescape(qvbl[1].replace(/%20|\ +/g," ")) : null
}
parm1=qsobj(0)
parm2=qsobj(1)
</script>

Then you can use JS to wite the contents
E.g. this will write a heading containing parm1

<h1>
<script type="text/javascript">document.write(parm1)</script>
</h1>

Because I have posted codes here before without trying it (and then felt stupid), I just tested
it, and here is the code
callpagex.html
=========
<html>
<head>
</head>
<body>
<a href="pagex.html?parm1=fred&parm2=sue">Call page x</a>.
</body>
</html>

pagex.html
========
<html>
<head>
<script type="text/javascript">
function qsobj(parm)
{
var qpairs = document.location.search.substring(1).split("&")
var qvbl = qpairs[parm].split("=")
return qvbl[1] ? unescape(qvbl[1].replace(/%20|\ +/g," ")) : null
}
parm1=qsobj(0)
parm2=qsobj(1)
</script>
</head>
<body>
<h1>
<script type="text/javascript">document.write(parm1)</script>
</h1>
</body>
</html>

Clicking on "Call page x" gives this result in large bold type
fred

I hope you can adapt this to what you are wanting to do.
If you have problems, post your code and I will try to adapt it using this idea
Click to expand...
Click to expand...
 
Bill said:
Trevor,

I was able to get your suggestion to work. But I have to click on the
link which then opens the other page. I would like the included page
to be displayed on the including page where the include 'statement'
is located. Is there any way to combine your suggestion with the
<!--webbot bot="Include" U-Include="header.htm" TAG="BODY" -->
suggestion of Steve Easton?
Thanks,

Bill
Click to expand...

As Thomas has said, you include the code at design time. Therefore the only way to change what is in it is to embed a variable in it
and change that variable each time the page with included code is called

My idea was to make the page with included code look like this
pagex.html
=======
<html>
<head>
<script type="text/javascript">
function qsobj(parm){
var qpairs = document.location.search.substring(1).split("&")
var qvbl = qpairs[parm].split("=")
return qvbl[1] ? unescape(qvbl[1].replace(/%20|\ +/g," ")) : null
}
parm1=qsobj(0)
function gethead(){document.getElementById("head1").innerHTML = '<h1>' + parm1 + '</h1>'}
</script>
</head>
<body onload = "gethead()">
Other code

<!-- Included code starts here -->
<span id="head1"></span>
other included code
<!-- Included code ends here -->

Other code
</body>
</html>

When this page is called it can be passed a parameter to alter what is in "head1" (Of course it doesn't have to be a heading, this
was just an example.)
This can only occur at run time.

Do you want to have a page with different text dependent on what occurs at run time?

It can be done like this
page1.html
=======
<html>
<head>
</head>
<body onload="location.href='pagex.html?parm1=fred'">
</body>
</html>

page2.html
=======
<html>
<head>
</head>
<body onload="location.href='pagex.html?parm1=sue'">
</body>
</html>

page1.html and page2.html can be called directly, or by user selection

But this may not be what you want.
 
With your suggestions and a lot of experimentation, I have something simple
that works. Maybe I didn't do a good job originally explaining my
requirements. Here's what I have. I have simplified the header and footer
here to the point you may wonder why I need them.

I think this should be safe for all browser typs, right?

Thanks for the help...


header.htm (note this is my page header not an html header)

<html>
<head>
<title>header</title>
</head>
<body>
<center><h1><a name="top"><script
type="text/javascript">document.write(PageTitle)</script></a></h1></center>
<p><center><a hrefRelease-History.htm">Release 2.1</a></center></p>
<p><center><a href="index.htm">
<script type="text/javascript">if(PageTitle == "Bill's Home Page") {
document.write("This is ") } else { document.write("Back to ") }
</script>Bill's Home Page.</a></center></p>
</body>
</html>

footer.htm

<html>
<head>
<title>footer</title>
</head>
<body>
<a href="#top"><p align="center">End of <script
type="text/javascript">document.write(PageTitle)</script>. Back to top.
</body>
</html>

index.htm

<html>
<head>
<title>Bill's Home Page</title>
</head>
<body>
<script type="text/javascript">PageTitle="Bill's Home Page"</script>
<!--webbot bot="Include" U-Include="header.htm" TAG="BODY" -->
<p>
<center>other stuff here.</center>
</p>
<!--webbot bot="Include" U-Include="footer.htm" TAG="BODY" -->
</body>
</html>

anotherpage.htm

<html>
<head>
<title>Bill's Home Page</title>
</head>
<body>
<script type="text/javascript">PageTitle="Bill's Other Page"</script>
<!--webbot bot="Include" U-Include="header.htm" TAG="BODY" -->
<p>
<center>other stuff here.</center>
</p>
<!--webbot bot="Include" U-Include="footer.htm" TAG="BODY" -->
</body>
</html>



Trevor L. said:
Bill said:
Trevor,

I was able to get your suggestion to work. But I have to click on the
link which then opens the other page. I would like the included page
to be displayed on the including page where the include 'statement'
is located. Is there any way to combine your suggestion with the
<!--webbot bot="Include" U-Include="header.htm" TAG="BODY" -->
suggestion of Steve Easton?
Thanks,

Bill
Click to expand...

As Thomas has said, you include the code at design time. Therefore the
only way to change what is in it is to embed a variable in it and change
that variable each time the page with included code is called

My idea was to make the page with included code look like this
pagex.html
=======
<html>
<head>
<script type="text/javascript">
function qsobj(parm){
var qpairs = document.location.search.substring(1).split("&")
var qvbl = qpairs[parm].split("=")
return qvbl[1] ? unescape(qvbl[1].replace(/%20|\ +/g," ")) : null
}
parm1=qsobj(0)
function gethead(){document.getElementById("head1").innerHTML = '<h1>' +
parm1 + '</h1>'}
</script>
</head>
<body onload = "gethead()">
Other code

<!-- Included code starts here -->
<span id="head1"></span>
other included code
<!-- Included code ends here -->

Other code
</body>
</html>

When this page is called it can be passed a parameter to alter what is in
"head1" (Of course it doesn't have to be a heading, this was just an
example.)
This can only occur at run time.

Do you want to have a page with different text dependent on what occurs at
run time?

It can be done like this
page1.html
=======
<html>
<head>
</head>
<body onload="location.href='pagex.html?parm1=fred'">
</body>
</html>

page2.html
=======
<html>
<head>
</head>
<body onload="location.href='pagex.html?parm1=sue'">
</body>
</html>

page1.html and page2.html can be called directly, or by user selection

But this may not be what you want.
Click to expand...
 
With your suggestions and a lot of experimentation, I have something
simple that works. Maybe I didn't do a good job originally explaining
my requirements.
Click to expand...

Well, I may not have understood
Here's what I have. I have simplified the header and
footer here to the point you may wonder why I need them.
Click to expand...

Not at all. If it works, use it
I think this should be safe for all browser typs, right?
Click to expand...

Yes, I think so
Thanks for the help...
Click to expand...

I have attached some redrafts.
Hopefully they still do what you want (not what I thought you want) but they use a bit less code

header.htm
=======
<html>
<head>
<title>header</title>
</head>
<body>
<div id="top"></div>
<p><center>
<a href="Release-History.htm">Release 2.1</a>
</center></p>
<div id="homepage"></div>
</body>
</html>

footer.htm
=======
<html>
<head>
<title>footer</title>
</head>
<body>
<div id="foot"></div>
</body>
</html>

index.htm
=======
<html>
<head>
<!-- index.htm -->
<title>Bill's Home Page</title>
<script type="text/javascript" src="external.js"></script>
</head>
<body onload="writecode()">
<!--webbot bot="Include" U-Include="header.htm" TAG="BODY" -->

<p>
<center>other stuff here.</center>
</p>

<!--webbot bot="Include" U-Include="footer.htm" TAG="BODY" -->
</body>
</html>

anotherpage.htm
===========
<html>
<head>
<!-- anotherpage.htm -->
<title>Another Page</title>
<script type="text/javascript" src="external.js"></script>
</head>
<body onload="writecode()">
<!--webbot bot="Include" U-Include="header.htm" TAG="BODY" -->


<p>
<center>other stuff here.</center>
</p>

<!--webbot bot="Include" U-Include="footer.htm" TAG="BODY" -->
</body>
</html>

This requires another file: external.js.
Add this into the same folder as index.htm
external.js
=======
function writecode() {
document.getElementById("top").innerHTML =
'<center><h1><a name="top">' + document.title + '</h1></a></center>'
document.getElementById("foot").innerHTML =
'<center><a href="#top">End of ' + document.title + '. Back to top.</a></center>'
var HTML = '<center><a href="index.htm">'
HTML += (document.title == "Bill's Home Page") ? 'This is ' : 'Back to '
document.getElementById("homepage").innerHTML
= HTML
+ 'Bill\'s Home Page.</a>'
+ '</center>'
}

BTW, this simplifies footer.htm so much that you could replace
<!--webbot bot="Include" U-Include="footer.htm" TAG="BODY" -->
by
<div id="foot"></div>
This line is all that is included anyway

So I guess I am agreeing in part with your comment:
"I have simplified the header and footer here to the point you may wonder why I need them."

I have simplified header.htm quite a lot also. With a bit more work, I could put all the code into the JS function and you could
similarly replace
<!--webbot bot="Include" U-Include="header.htm" TAG="BODY" -->
by
<div id="top"></div>
(Not as the function stands, but it doesn't need much)

Well, that was all great fun.
I hope it helps
 
Thanks. I just looked at the html file with wordpad and I see that the
included code is actually saved in the file. Now I get the difference
between this and SSI.

There is one annoying 'feature' of using this webbot. when I format the code
the way I want, then save the file, FrontPage decides to reformat it before
saving. I puts the first line or lines after the webbot statement on the
same line as the webbot statement. Any way to correct this? See the examples
here.

<!--webbot bot="Include" U-Include="header.htm" TAG="BODY" -->

<hr align=center width=80% size=3>

becomes

<!--webbot bot="Include" U-Include="header.htm" TAG="BODY" --><hr
align=center width=80% size=3>

and

<!--webbot bot="Include" U-Include="MouseBubbles.htm" TAG="BODY"-->

</head>

<body background="background.gif">

<table border=0 width="100%">

becomes

<!--webbot bot="Include" U-Include="MouseBubbles.htm"
TAG="BODY"--></head><body background="background.gif"><table border=0
width="100%">



Trevor L. said:
With your suggestions and a lot of experimentation, I have something
simple that works. Maybe I didn't do a good job originally explaining
my requirements.
Click to expand...

Well, I may not have understood
Here's what I have. I have simplified the header and
footer here to the point you may wonder why I need them.
Click to expand...

Not at all. If it works, use it
I think this should be safe for all browser typs, right?
Click to expand...

Yes, I think so
Thanks for the help...
Click to expand...

I have attached some redrafts.
Hopefully they still do what you want (not what I thought you want) but
they use a bit less code

header.htm
=======
<html>
<head>
<title>header</title>
</head>
<body>
<div id="top"></div>
<p><center>
<a href="Release-History.htm">Release 2.1</a>
</center></p>
<div id="homepage"></div>
</body>
</html>

footer.htm
=======
<html>
<head>
<title>footer</title>
</head>
<body>
<div id="foot"></div>
</body>
</html>

index.htm
=======
<html>
<head>
<!-- index.htm -->
<title>Bill's Home Page</title>
<script type="text/javascript" src="external.js"></script>
</head>
<body onload="writecode()">
<!--webbot bot="Include" U-Include="header.htm" TAG="BODY" -->

<p>
<center>other stuff here.</center>
</p>

<!--webbot bot="Include" U-Include="footer.htm" TAG="BODY" -->
</body>
</html>

anotherpage.htm
===========
<html>
<head>
<!-- anotherpage.htm -->
<title>Another Page</title>
<script type="text/javascript" src="external.js"></script>
</head>
<body onload="writecode()">
<!--webbot bot="Include" U-Include="header.htm" TAG="BODY" -->


<p>
<center>other stuff here.</center>
</p>

<!--webbot bot="Include" U-Include="footer.htm" TAG="BODY" -->
</body>
</html>

This requires another file: external.js.
Add this into the same folder as index.htm
external.js
=======
function writecode() {
document.getElementById("top").innerHTML =
'<center><h1><a name="top">' + document.title + '</h1></a></center>'
document.getElementById("foot").innerHTML =
'<center><a href="#top">End of ' + document.title + '. Back to
top.</a></center>'
var HTML = '<center><a href="index.htm">'
HTML += (document.title == "Bill's Home Page") ? 'This is ' : 'Back to '
document.getElementById("homepage").innerHTML
= HTML
+ 'Bill\'s Home Page.</a>'
+ '</center>'
}

BTW, this simplifies footer.htm so much that you could replace
<!--webbot bot="Include" U-Include="footer.htm" TAG="BODY" -->
by
<div id="foot"></div>
This line is all that is included anyway

So I guess I am agreeing in part with your comment:
"I have simplified the header and footer here to the point you may wonder
why I need them."

I have simplified header.htm quite a lot also. With a bit more work, I
could put all the code into the JS function and you could similarly
replace
<!--webbot bot="Include" U-Include="header.htm" TAG="BODY" -->
by
<div id="top"></div>
(Not as the function stands, but it doesn't need much)

Well, that was all great fun.
I hope it helps

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
 
Bill said:
Thanks. I just looked at the html file with wordpad and I see that the
included code is actually saved in the file. Now I get the difference
between this and SSI.

There is one annoying 'feature' of using this webbot. when I format
the code the way I want, then save the file, FrontPage decides to
reformat it before saving. I puts the first line or lines after the
webbot statement on the same line as the webbot statement. Any way to
correct this? See the examples here.
Click to expand...

No, that is what FrontPage does

It has annoyed me also, so I just edit the file afterwards.
 
Back
Top