Forum Moderators: open
I would like to know whether it would be possible to include an HTML tag inside a javascript, like this:
<script language='JavaScript' type='text/javascript'>
<!--
javascript code here...
<a href="page.html">HTML link inside javascript</a>
javascript code here...
// -->
</script>
I do not want to use the document.write function to output the HTML link tag. The A HREF tag must be hardcoded in the HTML page.
The reason I want to do this is because I want google.com to index that link and transfer some PR to the target page. If I used document.write, that would not happen, at least from what I know.
Thanks,
Alex
I'm not sure what your script is going to be doing, but essentially you should place your script in its own file and include it at the end of your document. For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title></title>
</head>
<body>
<a href="page.html">HTML link NOT inside javascript</a>
<script type="text/javascript" src="example.js"></script>
</body>
</html>
And yes, you should avoid document.write. Also, get rid of the language attribute... it's not valid (nor is it needed), and there's no need to wrap your script code in HTML comments (that was to support Netscape 1, which is long dead).
Anyway, I understand what you're saying but I doubt it can help me, and here's why:
I'm trying to build a small calendar that is formed by two parts:
1. HEADER
2. FOOTER
In between these two, I will need to have the A HREF link I was talking about. In the header there will be some HTML code to create the calendar header, then there will be the link, and then the HTML code of the footer will follow. It's all in this order and I can't change anything, like placing the link before the header and the footer, or after them. So the link must be in the middle, otherwise it will mess up my calendar design.
The code i'm using now is the one below. Please notice the last variable named 'part', which is set to either 'header' or 'footer'. This outputs the data in the exact order I need it: header, link and then footer.
<script language='JavaScript' type='text/javascript'><!--
var time=new Date();
var cm=time.getMonth();
var cd=time.getDay();
var cdn=time.getDate();
document.write("<script language='JavaScript' src='");
document.write("http://server/cgi-bin/calendar.pl?cm="+cm+"&cdn="+cdn+"&cd="+cd+"&part=header'></script>")
//--></script>
<a href="link.htm">HTML Link</a>
<script language='JavaScript' type='text/javascript'><!--
var time=new Date();
var cm=time.getMonth();
var cd=time.getDay();
var cdn=time.getDate();
document.write("<script language='JavaScript' src='");
document.write("http://server/cgi-bin/calendar.pl?cm="+cm+"&cdn="+cdn+"&cd="+cd+"&part=footer'></script>")
//--></script>
This is the only way I could get this done. Please note that I also need all the date variables to be passed to the Perl script, like it's shown above.
If you can think of more elegant way to do this (with less code!), please let me know.
Thanks,
Alex
A better way to do this would be to use a server-side language (PHP, ASP, etc.) to write out the script tags (or find a better calendar... this one seems a bit hokey to me if you have to execute it twice passing in different parameters for head and foot).
If it was installed on the local server I would have used SSI and Perl and that would work with minimal code writing.
But this is not the case, unfortunately ;)
I was thinking of a solution like this:
<script language='JavaScript' type='text/javascript'>
<!--
(code here...)
document.write("<script language='JavaScript' src='");
document.write("http://server/cgi-bin/calendar.pl?...&part=header'></script>")
<a href="page.html">HTML link inside javascript</a>
(code here...)
document.write("<script language='JavaScript' src='");
document.write("http://server/cgi-bin/calendar.pl?...&part=footer'></script>")
// -->
</script>
This, of course, doesn't work, because of the HTML tag in the javascript.
But if it would, I would have accomplished all of my requirements:
1. use a single javascript within the web page;
2. have the link in plain HTML, hardcoded in the page, perfect for google.com to index;
3. follow the HTML flow that I want, in this particular order: header, HTML link, then footer.
I know it looks strange to you, but I need it all in this way. If I change the order sequence of the HTML code, it won't allow me to build the calendar the way I need it to look like. This is a must!
Is there a working solution to accomplish all this and still have a single javascript on a web page and not two? Like I said, it's duable with two javascripts, but how about with only one? What do you think?
Alex
Here is how I would approach this if I was you.
1. Define the markup like this:
<div id="calendarContainer">
<a href="page.html">HTML link</a>
</div>
2. Include your single script tag (preferably at the bottom of the page just before your closing </body> tag):
<script type='text/javascript'>
document.write("<script src='");
document.write("http://server/cgi-bin/calendar.pl?target=calendarContainer&...'><\/script>");
</script>
But of course, it requires that your script for the calendar is updated to use the DOM methods instead of document.write, but you should really be doing that anyway. As I said before, avoid document.write.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title></title>
</head>
<body>
<div>...Page Header...</div>
<div id="calendarContainer">
<a href="http://example.com/page.htm">Static Link</a>
</div>
<div>...Footer...</div>
<script type="text/javascript">
// Create a single object to contain all of our script
// so we don't muck up the global namespace
var MIGHTYCALENDAR = function () {
return {
/**
* Create our own addEvent function which we'll use to call
* our createCalendar method when window.onload is triggered
*/
addEvent : function (obj, type, fn) {
if (obj.attachEvent) {
obj['e'+type+fn] = fn;
obj[type+fn] = function () {
obj['e'+type+fn](window.event);
}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type, fn, false);
}
},
createCalendar : function () {
// Get the calendar container, and links within it
var cc = document.getElementById('calendarContainer');
var aList = cc.getElementsByTagName('a');
var myLink = null;
var i;
// Find 'our' link
for (i = 0; i < aList.length; i++) {
if (aList[i].href && aList[i].href == 'http://example.com/page.htm') {
myLink = aList[i];
break;
}
}
if (!myLink) {
// Did not find our link, so return without doing anything
return;
}
// Generate calendar header
var h = document.createElement('div');
h.appendChild(document.createTextNode('Calendar Header'));
cc.insertBefore(h, myLink);
// Generate calendar footer
var f = document.createElement('div');
f.appendChild(document.createTextNode('Calendar Footer'));
cc.appendChild(f);
}
};
}();
MIGHTYCALENDAR.addEvent(window, 'load', MIGHTYCALENDAR.createCalendar);
</script>
</body>
</html>
<div>...Footer...</div>
The HTML data in both page header and footer is not supposed to be static, it's generated on the server side. The footer is the part that shows different events for different dates, and all of these events are written in a database on the server. In my example I used document.write because it has the ability to retrieve this data from the server and display it. I used:
document.write("<script language='JavaScript' src='");
document.write("http://server/cgi-bin/calendar.pl?...&part=footer'></script>")
This automatically fetches the data from the server, which is the HTML code of the footer. Inside this HTML code there's also the text event information I was talking above, which is mostly what the user will see in the footer of the calendar.
The same happens with the header, only the data there changes less frequent.
I should have added this requirement to my list above, didn't think we'd come here.
This is not the typical calendar showing the days of the month only, it actually shows these events that are taking place on the day the calendar is loaded, plus some other information that is almost always different.
Like I said, I'm new to JS, so please correct me if I'm wrong, but I guess all data inside the <div> </div> tags above is static and can't be retrieved from the server every time the calendar is loaded in the browser. Right? I'm just asking, I don't know...
Anyhow, please bear with me, I'm not really a programmer. Just trying to do my things by myself, as much as I can at least... ;)
Thank you,
Alex
The HTML data in both page header and footer is not supposed to be static,
