Tutorial
Click on thumbnailed images to enlarge
Quite often there is a need to open a different web page inside an IFRAME, for instance when navigating through a menu. Each menu item would open up a new page inside the IFRAME.
However, the IFRAME tag is dropped in XHTML 1.1. But there is the OBJECT tag instead. The problem with this is, that this is poorly implemented in some browsers, and is not consistent across different browsers. In addition to that, Internet Explorer by default displays a scroll bar that is not always desirable. And then there is the issue with the fact that just changing the value of the "data" attribute of the OBJECT does not seem to have any effect.
The code example below shows you how you can use the OBJECT tag in an XHTML 1.1 web page, and how you can use it to navigate through different web pages. And also how you can get rid of the annoying scrollbar that appears in IE browsers.
Basically, to enable a new value for the "data" attribute of the OBJECT tag, we simply use the DOM to clone the existing OBJECT tag, then change its "data" attribute, and then replace the OBJECT by the modified clone.
The next challenge is to wait until the new OBJECT has fully loaded the new web page. This is needed so that the scrollbar can be removed for IE. It won't work before the page is loaded.
There is an onload event that works in mozilla based browsers (oContentArea.body.onload), but nothing that I was able to find for IE.
Instead, we will call a new Javascript function ("setContentAreaStyle"), right after the new OBJECT is created. This function checks if the body.scroll attribute for this OBJECT exists. If not, the web page is not yet fully loaded and the function waits 10ms until it tries again. It does this until the aforementioned attribute is found, and then finally changes the scrollbar style. This all goes very quick and you may not even get the chance to see the scrollbar appear.
Note the "auto" value assigned to the scrollbar style. This means that IE should only show the scrollbar when the page does not fully fit inside the OBJECT area. This is the default behaviour for mozilla based browsers.
To be fully XHTML 1.1 compliant, the OBJECT tag should have the "application/xhtml+xml" media type assigned to the "type" attribute (assuming that the web pages you are navigating to are also in XHTML format), but this will mess up IE. It works fine in mozilla browsers. We will just use the "text/html" media type instead.
Here is the code:
Tutorial also available at this [link].
However, the IFRAME tag is dropped in XHTML 1.1. But there is the OBJECT tag instead. The problem with this is, that this is poorly implemented in some browsers, and is not consistent across different browsers. In addition to that, Internet Explorer by default displays a scroll bar that is not always desirable. And then there is the issue with the fact that just changing the value of the "data" attribute of the OBJECT does not seem to have any effect.
The code example below shows you how you can use the OBJECT tag in an XHTML 1.1 web page, and how you can use it to navigate through different web pages. And also how you can get rid of the annoying scrollbar that appears in IE browsers.
Basically, to enable a new value for the "data" attribute of the OBJECT tag, we simply use the DOM to clone the existing OBJECT tag, then change its "data" attribute, and then replace the OBJECT by the modified clone.
The next challenge is to wait until the new OBJECT has fully loaded the new web page. This is needed so that the scrollbar can be removed for IE. It won't work before the page is loaded.
There is an onload event that works in mozilla based browsers (oContentArea.body.onload), but nothing that I was able to find for IE.
Instead, we will call a new Javascript function ("setContentAreaStyle"), right after the new OBJECT is created. This function checks if the body.scroll attribute for this OBJECT exists. If not, the web page is not yet fully loaded and the function waits 10ms until it tries again. It does this until the aforementioned attribute is found, and then finally changes the scrollbar style. This all goes very quick and you may not even get the chance to see the scrollbar appear.
Note the "auto" value assigned to the scrollbar style. This means that IE should only show the scrollbar when the page does not fully fit inside the OBJECT area. This is the default behaviour for mozilla based browsers.
To be fully XHTML 1.1 compliant, the OBJECT tag should have the "application/xhtml+xml" media type assigned to the "type" attribute (assuming that the web pages you are navigating to are also in XHTML format), but this will mess up IE. It works fine in mozilla browsers. We will just use the "text/html" media type instead.
Here is the code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML Example Page</title>
<script type="text/javascript">
// <![CDATA[
var oContentArea = null;
var sRootPath = null;
var bHasScrollStyle = false;
function initialize() {
oContentArea = document.getElementById("contentarea");
initializeContentArea();
}
function initializeContentArea() {
sRootPath = oContentArea.data.replace(/[^\/]*$/, "");
// Check if object has scrollbar with changeable style.
if ((oContentArea.body != null)
&& (oContentArea.body.scroll != null)) {
bHasScrollStyle = true;
}
setContentAreaStyle();
}
// Set style for object tag.
function setContentAreaStyle() {
if (bHasScrollStyle) {
if ((oContentArea.body != null)
&& (oContentArea.body.scroll != null)) {
bHasScrollStyle = true;
oContentArea.body.scroll = "auto";
oContentArea.body.style.scrollbarFaceColor = "#005A9C";
oContentArea.body.style.scrollbarArrowColor = "#005A9C";
oContentArea.body.style.scrollbarTrackColor = "#005A9C";
oContentArea.body.style.scrollbarShadowColor = "#005A9C";
oContentArea.body.style.scrollbarHighlightColor = "#005A9C";
oContentArea.body.style.scrollbar3dlightColor = "#005A9C";
oContentArea.body.style.scrollbarDarkshadowColor = "#005A9C";
} else {
setTimeout("setContentAreaStyle();", 10);
}
}
}
function openContent(page) {
var oClone = oContentArea.cloneNode(true);
oClone.data = sRootPath + page + ".html";
var oPlaceHolder = document.getElementById("contentholder");
oPlaceHolder.removeChild(oContentArea);
oPlaceHolder.appendChild(oClone);
oContentArea = oClone;
setContentAreaStyle();
return false;
}
// ]]>
</script>
</head>
<body onload="initialize();">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<!-- Menu -->
<tr>
<td>
<a href="javascript://" onclick="return openContent('home');">Home</a>
<a href="javascript://" onclick="return openContent('intro');">Introduction</a>
<a href="javascript://" onclick="return openContent('page1');">Page 1</a>
<a href="javascript://" onclick="return openContent('page2');">Page 2</a>
<a href="javascript://" onclick="return openContent('page3');">Page 3</a>
<a href="javascript://" onclick="return openContent('page4');">Page 4</a>
<a href="javascript://" onclick="return openContent('help');">Help</a>
</td>
</tr>
<!-- contents -->
<tr>
<td id="contentholder">
<object id="contentarea" data="home.html" type="text/html">
</object>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML Example Page</title>
<script type="text/javascript">
// <![CDATA[
var oContentArea = null;
var sRootPath = null;
var bHasScrollStyle = false;
function initialize() {
oContentArea = document.getElementById("contentarea");
initializeContentArea();
}
function initializeContentArea() {
sRootPath = oContentArea.data.replace(/[^\/]*$/, "");
// Check if object has scrollbar with changeable style.
if ((oContentArea.body != null)
&& (oContentArea.body.scroll != null)) {
bHasScrollStyle = true;
}
setContentAreaStyle();
}
// Set style for object tag.
function setContentAreaStyle() {
if (bHasScrollStyle) {
if ((oContentArea.body != null)
&& (oContentArea.body.scroll != null)) {
bHasScrollStyle = true;
oContentArea.body.scroll = "auto";
oContentArea.body.style.scrollbarFaceColor = "#005A9C";
oContentArea.body.style.scrollbarArrowColor = "#005A9C";
oContentArea.body.style.scrollbarTrackColor = "#005A9C";
oContentArea.body.style.scrollbarShadowColor = "#005A9C";
oContentArea.body.style.scrollbarHighlightColor = "#005A9C";
oContentArea.body.style.scrollbar3dlightColor = "#005A9C";
oContentArea.body.style.scrollbarDarkshadowColor = "#005A9C";
} else {
setTimeout("setContentAreaStyle();", 10);
}
}
}
function openContent(page) {
var oClone = oContentArea.cloneNode(true);
oClone.data = sRootPath + page + ".html";
var oPlaceHolder = document.getElementById("contentholder");
oPlaceHolder.removeChild(oContentArea);
oPlaceHolder.appendChild(oClone);
oContentArea = oClone;
setContentAreaStyle();
return false;
}
// ]]>
</script>
</head>
<body onload="initialize();">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<!-- Menu -->
<tr>
<td>
<a href="javascript://" onclick="return openContent('home');">Home</a>
<a href="javascript://" onclick="return openContent('intro');">Introduction</a>
<a href="javascript://" onclick="return openContent('page1');">Page 1</a>
<a href="javascript://" onclick="return openContent('page2');">Page 2</a>
<a href="javascript://" onclick="return openContent('page3');">Page 3</a>
<a href="javascript://" onclick="return openContent('page4');">Page 4</a>
<a href="javascript://" onclick="return openContent('help');">Help</a>
</td>
</tr>
<!-- contents -->
<tr>
<td id="contentholder">
<object id="contentarea" data="home.html" type="text/html">
</object>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Tutorial also available at this [link].
Tutorial Comments
Showing latest 1 of 1 comments
