JavaScript getElementById(...) is null or not an object IE
Solution 1
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.
Solution 2
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.
Solution 3
alert(document.getElementById('abcId').value);
alert(document.formName.elements['abcName'].value);
I expirienced the same issue i tried the 2nd one it worked.
Related videos on Youtube
Ali
Updated on June 04, 2022Comments
-
Ali almost 2 years
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
-
Ali almost 14 yearsThanks Peter, but this is only working if you resize the window.
-
Ali almost 14 yearsThanks Tomgrohl. After trying this, there is no error in the status bar, but the size of iframe is the default.
-
Ali almost 14 yearsMuch appreciate your effort, but its still not working for me in IE. It only becomes full height when I resize the window. Is there any other workaround? Thanks again.
-
Admin almost 14 yearsOn page load you could get it to run resizeIframe(). That would solve it. I've edited my answer as it was easier so check that.
-
Ali almost 14 yearsJust removed the script from <head> and placed it inside <body> after the <iframe> and it worked. Thanks a ton!