JavaScript getElementById(…) is null or not an obj

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

标签： javascript internet-explorer getelementbyid

4条回答

叛逆

2楼-- · 2019-02-27 18:16

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

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

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

0人赞添加讨论(0) 举报

▲ chillily

3楼-- · 2019-02-27 18:16

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

0人赞添加讨论(0) 举报

甜甜的少女心

4楼-- · 2019-02-27 18:26

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.

0人赞添加讨论(0) 举报

虎瘦雄心在

5楼-- · 2019-02-27 18:29

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.

0人赞添加讨论(0) 举报

JavaScript getElementById(…) is null or not an obj

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间