开发者

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.


  1. alert(document.getElementById('abcId').value);
    
  2. 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;
};
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜