JavaScript getElementById(...) is null or not an object IE
This must be something very simple for the JavaScript experts out there. In the following code, I am trying to open an iframe to the full height of browser window.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('documentFrame2').offsetTop;
height -= 20;
document.getElementById('documentFrame2').style.height = height +"px";
};
document.getElementById('documentFrame2').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe src="standard-tube开发者_高级运维-map.pdf" id="documentFrame2" width="100%" onload="resizeIframe();" ></iframe>
</div>
</form>
</body>
</html>
It works in Mozilla but in IE (only tested in IE8) it gives the error: 'document.getElementById(...) is null or not an object'. Can anybody suggest what should I change to make it work cross browser?
Many thanks, Ali
Try wrapping
document.getElementById('documentFrame2').onload = resizeIframe;
Within:
window.onload = function(){
document.getElementById('documentFrame2').onload = resizeIframe;
window.onresize = resizeIframe;
resizeIframe();
};
The iframe doesn't exist in the DOM until the page/Dom has loaded.
UPDATE:
Didn't see part of the code you posted.
You could keep onload = "resizeIframe"
within the element itself and have the JavaScript in the head as:
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('documentFrame2').offsetTop;
height -= 20;
document.getElementById('documentFrame2').style.height = height +"px";
}
window.onresize = resizeIframe;
That way you wouldn't need any JavaScript running after the element.
alert(document.getElementById('abcId').value);
alert(document.formName.elements['abcName'].value);
I expirienced the same issue i tried the 2nd one it worked.
you do
document.getElementById('documentFrame2').onload = resizeIframe;
before the document is ready so the iframe can be found. call this in the onload- or document-ready-function or in a seperate javascript-block after the iframe.
If you have used onload"resizeIframe"
in the iframe tag, you don't need document.getElementById('documentFrame2').onload = resizeIframe;
anymore
I prefer relacing window.onresize = resizeIframe;
by:
window.onload = function() {
window.onresize = resizeIframe;
};
Sometimes the window will be resized before the iframe is ready for operation, and that would cause errors.
========================
edited:
window.onload = function() {
resizeIframe();
window.onresize = resizeIframe;
};
精彩评论