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

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.

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.

gowtham

alert(document.getElementById('abcId').value);

alert(document.formName.elements['abcName'].value);

I expirienced the same issue i tried the 2nd one it worked.

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;
};

来源：https://stackoverflow.com/questions/3147556/javascript-getelementbyid-is-null-or-not-an-object-ie

标签

javascript

internet-explorer

getelementbyid