I have a hidden iframe in my web page, and I'm trying to access the DOM inside the iframe. My code works fine in Firefox, but not in IE. For IE, I get the following error:
Unable to get value of the property 'getElementById': object is null or undefined
The document object is missing the getElementById() method. How is this possible?
My code is long, but here's the key part of the JavaScript that is failing:
Code:
var iframe = document.getElementById('ExcelExportIFrame'); //this line of code works fine
var myContentDocument = iframe.contentDocument; //this line of code works fine
var methodNameField = myContentDocument.getElementById('methodName'); //this line does not work in IE!!!!
Here's the HTML that gets loaded in the iframe:
Code:
<!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>
<title></title>
</head>
<body>
Hello World!
<form id="hiddenForm" method="post" action="/handlers/Router.ashx" enctype="multipart/form-data" >
<input type="text" id="EXPORT" name="EXPORT" value="TRUE" />
<input type="hidden" id="headers" name="headers" />
<input type="hidden" id="columns" name="columns" />
<input type="submit" />
</form>
</body>
</html>
Here's a more complete, but still shortened version of my JavaScript:
Code:
CombinedGrid = Ext.extend(Ext.grid.GridPanel, {
stateful: true,
enableHdMenu: false,
plugins: [new Ext.ux.grid.GridViewMenuPlugin(), new GridPanel.Filterable(), new Ext.ux.grid.GridPanel.StaticScrollGridPanel()],
view: new Ext.grid.GridView(),
initComponent: function() {
this.view.scrollLeft = 0;
this.view.scrollTop = 0;
this.on('filter', this.onFilter, this);
this.getStore().on('load', function() {
var storeCount = this.getStore().getTotalCount();
this.updateTabTitleWithCount(storeCount);
}, this);
Ext.applyIf(this, {
columns: SearchResultsCombinedGridColumnModel,
bbar: new Ext.PagingToolbar({
pageSize: 15,
store: this.store,
displayInfo: true,
items: ['->', {
icon: 'Images/Icons/page_excel.png',
text: 'Export',
tooltip: 'Export data to an Excel document.',
handler: function() {
//this should be refactored, to get the parent
//rather than getting it by ID
var grid = Ext.getCmp('combinedResultsTab');
//this helper function is in Library.js in the framework...
var colInfo = GetExportColumns(grid);
var headers = colInfo.headers;
var columns = colInfo.columns;
var iframe = document.getElementById('ExcelExportIFrame'); //this line of code works fine
iframe.src = "/scripts/ExcelExport.htm";
try {
var myContentDocument = iframe.contentDocument; //this line of code works fine
var methodNameField = myContentDocument.getElementById('methodName'); //this line does not work in IE!!!!
methodNameField.value = 'ExportCombined';
var headersField = myContentDocument.getElementById('headers');
headersField.value = ConvertArrayToCommaSeparatedList(headers);
var columnsField = myContentDocument.getElementById('columns');
columnsField.value = ConvertArrayToCommaSeparatedList(columns);
var myForm = myContentDocument.getElementById('hiddenForm');
myForm.submit();
} catch(err) {
window.console && console.log(err.description);
alert(err.description);
}
}
},{
xtype: 'box',
html: '<iframe id="ExcelExportIFrame" src="ExcelExport.htm"\
</iframe>'
}]
})
})
CombinedGrid.superclass.initComponent.call(this);
}, //initComponent
});
Again, this code works fine in Firefox, but in IE, the document object is missing the getElementById() method.
Does anyone know what's going on here or how to fix it?
Document object doesn't contain getElementById(). Why???
Reply With Quote
