Internet Explorer lifeline is set to unplug by Microsoft starting from June 15, 2022, so it already entering the countdown stage, and everyone should need to full force and rushing to migrate legacy IE-only web applications to Chrome? Actually, Microsoft still will provide backward compatibility for IE until at least 2029 inside the Edge browser via Microsoft Edge with IE mode.
Detail information about IE timeline can be found here:
https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge
Although it still has some years to go before the actual unplug, it is no reason for us to continue procrastination about the migration. Today let us take a look at how to migrate some of the common use IE ActiveXObject Microsoft.XMLHTTP and Microsoft.XMLDOM to Chrome/Firefox browser.
For JavaScript, the ActiveXObject Microsoft.XMLHTTP and Microsoft.XMLDOM actually have their equivalent object in Chrome liked browser, let have some of the comparisons on the table below. Noted: The Chrome supported code below are built-in code, you can consider using other libraries like jQuery too.
| IE SUPPORTED CODE | CHROME SUPPORTED CODE |
|---|---|
| xhr = new ActiveXObject(“Microsoft.XMLHTTP”); | xhr = new XMLHttpRequest(); |
| var domDoc = new ActiveXObject(“Microsoft.XMLDOM”); | domDoc = new DOMParser().parseFromString(xhr.responseText, “text/xml”); |
| var node = root.selectSingleNode (“/ArrayOfWeatherForecast/WeatherForecast/Summary”); | No equivalent, but it can code manually. Refer to funcSelectSingleNode. |
| var nodes = root.selectNodes(“WeatherForecast”); | var nodes = root.getElementsByTagName(“WeatherForecast”); |
| element.text | element.innerHTML |
| nodes[i].selectNodes(“Date”)[0].childNodes[0].text | nodes[i].getElementsByTagName(“Date”)[0].childNodes[0].nodeValue |
Develop Custom DOM object for Edge/Chrome:
Additionally, we can also create our custom plugin or object. We’ll create a JavaScript object and then create nested methods in this with same name we were having in IE DOM object. Under these methods we can write our custom logic to return the same values or perform same action.
Add jQuery reference before this code and then make a call to getDOM() method like
var myObject= getDOM();
Now as you will type dot (.) after myObject. all method will starts appearing to you and you can use these methods and can also alter them as per your needs.
function getDOM() {
return Object.create(getDOMFORChrome);
}
var getDOMFORChrome = (function () {
var Xml = function () {
return true;
};
var ValidateOnParse = function () {
return true;
};
var Url = function () {
return "";
};
var Text = function () {
return "";
};
var ParentNode = function () {
return "";
};
var NodeName = function () {
return "";
};
var NodeValue = function () {
return "";
};
var NodeType = function () {
return 1;
};
var DocumentElement = function (docElements) {
getDOMFORChrome.documentElement = docElements.documentElementFull.firstElementChild;
getDOMFORChrome.documentElement.firstChild = docElements.documentElementFull.firstElementChild;
return getDOMFORChrome.documentElement;
};
var NextSibling = function () {
return "";
};
var PreviousSibling = function () {
return "";
};
var IsChild = function () {
return "";
};
var FirstChild = function () {
//sub-Child
return "";
};
var Childnodes = function () {
return "";
};
var NodeTypeValue = function () {
return "";
};
var NodeTypeString = function () {
return "";
};
var Abort = function () {
//stop execution
return true;
};
var AppendChild = function (newChild) {
return newChild;
};
var CloneChild = function (deep) {
return deep;
};
var LoadXML = function (bstrXML, propertyToBeCreated) {
//bstrXML: full XML in string format
// propertyToBeCreated : new node to be created.
try {
if (propertyToBeCreated === undefined || propertyToBeCreated === "") {
getDOMFORChrome.xml = bstrXML; // set data in existing XML property
} else {
getDOMFORChrome[propertyToBeCreated] = bstrXML; //data will be stored in newly created property.
}
return true;
} catch (e) {
getDOMFORChrome.xml = ""; // On Error Clear XML
getDOMFORChrome[propertyToBeCreated] = "";
return false;
}
};
var Load = function (xmlSource, propertyToBeCreated) {
var output = "";
var flag = true;
if (xmlSource.length > 0) {
try {
getDOMFORChrome.documentElement = getDOMFORChrome.documentElementFull.firstElementChild;
getDOMFORChrome.documentElement.firstChild["text"] = getDOMFORChrome.documentElementFull.firstElementChild.textContent;
} catch (e) { var message = e.message; }
var data = ajaxGetData(xmlSource, "text");
if (propertyToBeCreated === undefined || propertyToBeCreated === "") {
getDOMFORChrome.xml = data;
getDOMFORChrome.url = xmlSource;
getDOMFORChrome.text = data;
} else {
getDOMFORChrome[propertyToBeCreated] = data; //data will be stored in newly created property.
}
flag = true;
}
else {
flag = false; //not loaded
}
return flag;
};
var SelectNodes = function (docxml, queryNode) {
// Param docxml: is full XML
//Param: queryNode is the node which need to be searched from above XML
//debugger;
queryNode = queryNode.replace("//", "");
const txtArray = queryNode.split("/");
try {
var specificNode = txtArray[0]; //node name
} catch (e) { var message = e.message; }
var xmlDoc = $.parseXML(docxml);
$xml = $(xmlDoc);
sourceXML = $xml.find(specificNode); //Return required nodes
return sourceXML;
};
var SetAttribute = function (id, value, sourceXML, specificNode) {
//param :id, id of XML node.
//param : value, value of the new node.
//param :sourceXML, it is the complete XML text in which node need to be added.
//param :specificNode, it is the name of node which will get addded in above complete XML and then final text will get returned.
//debugger;
var test = "";
var xmlDoc = $.parseXML(sourceXML);
$xml = $(xmlDoc);
if (specificNode === undefined || specificNode === "") {
test = $xml.attr(id, value); //will add prpty at root
} else {
//var test = $xml.find('section').attr('marked', 'marked');
test = $xml.find(specificNode).attr(id, value);
}
sourceXML = test[0].outerHTML;
return sourceXML;
};
var GetAttribute = function (id, sourceXML, specificNode) {
debugger;
//param :id, id of XML node.
//param :sourceXML, it is the complete XML text from which node need to be found.
//param :specificNode, it is the name of node/attr whose text will be returned.
var xmlDoc = $.parseXML(sourceXML);
$xml = $(xmlDoc);
if (specificNode === undefined || specificNode === "") {
sourceXML = $xml.attr(id); //will return this prpty
} else {
//var test = $xml.find('section').attr('marked', 'marked');
sourceXML = $xml.find(specificNode).attr(id);
}
return sourceXML;
};
var SelectSingleNode = function (docxml, queryNode) {
// Param docxml: is full XML
//Param: queryNode is the node which need to be searched from above XML
const data = "";
try {
debugger;
//If node and attribute both will be passed in 'queryNode' param
queryNode = queryNode.replace("//", "");
const txtArray = queryNode.split("/");
var xmlDoc;
try {
var specificNode = txtArray[0]; //node name
var id = txtArray[1]; // Attribute in above seleted node
xmlDoc = $.parseXML(docxml);
} catch (e)
{
return xmlDoc = docxml; //on error assign whole source xml/string
}
$xml = $(xmlDoc);
if (id === undefined || id === "") {
sourceXML = $xml.find(specificNode); //Return required single/first node
sourceXML = sourceXML[0];
} else {
sourceXML = $xml.find(specificNode).attr(id); //Return node's attribute value
}
return sourceXML;
}
catch (e) {
var msg = e.message;
console.log("core: error in SelectSingleNode");
}
return data;
};
var SetProperty = function (name, value) {
return true;
};
var Xml = function () {
return true;
};
return {
validateOnParse: ValidateOnParse,
url: Url,
text: Text,
parentNode: ParentNode,
nodeName: NodeName,
nodeValue: NodeValue,
nodeType: NodeType,
documentElement: DocumentElement,
nextSibling: NextSibling,
previousSibling: PreviousSibling,
isChild: IsChild,
firstChild: FirstChild,
childnodes: Childnodes,
nodeTypeValue: NodeTypeValue,
nodeTypeString: NodeTypeString,
abort: Abort,
appendChild: AppendChild,
cloneChild: CloneChild,
loadXML: LoadXML,
load: Load,
selectNodes: SelectNodes,
setAttribute: SetAttribute,
getAttribute: GetAttribute,
selectSingleNode: SelectSingleNode,
setProperty: SetProperty,
xml: Xml
};
})();
//Below Ajax methods will get used in above Closures.
function ajaxGetData(getURL, receiveDataType) {
var arr;
$.ajax({
type: "GET",
//contentType="text/xml",
dataType: receiveDataType,
async: false,
url: getURL,
//data: "password="+password,
success: function (data) {
arr = data;
}, error: function (error) {
//alert(error);
}
});
var retText = arr;
if (retText.lastIndexOf("/>") === retText.length - 2) {
retText = "";
}
else {
i = retText.search('">') + 2;
if (i >= 2) {
retText = retText.substr(i);
retText = retText.substr(0, retText.lastIndexOf("");
re = /</g;
retText = retText.replace(re, "<");
re = /&/g;
retText = retText.replace(re, "&");
return retText;
}
//Returning XML object to load in Custom DOM.
function ajaxGetXMLObject(getURL, receiveDataType) {
var arr;
$.ajax({
type: "GET",
//contentType="text/xml",
dataType: receiveDataType,
async: false,
url: getURL,
//data: "password="+password,
success: function (data) {
arr = data;
}, error: function (error) {
//alert(error);
}
});
//Returning XML object to load in Custom DOM.
return arr;
}
function ajaxPostData(postURL, dataToSend, sendDataType, receiveDataType) {
//debugger;
var arr;
if (sendDataType !== undefined && sendDataType.length <= 0) { sendDataType = "text/xml"; }
if (receiveDataType !== undefined && receiveDataType.length ") == retText.length - 2) {
retText = "";
}
else {
i = retText.search('">') + 2;
if (i >= 2) {
retText = retText.substr(i);
retText = retText.substr(0, retText.lastIndexOf("");
re = /</g;
retText = retText.replace(re, "<");
re = /&/g;
retText = retText.replace(re, "&");
return retText;
}
//End of AJAX methods