Using importNode in the context of Microsoft Edge involves transferring a

Question

Using importNode in the context of Microsoft Edge involves transferring a

I am facing an issue with a dynamic page that has the ability to change its main div content using a bar button. The pages are mostly static except for one which contains JavaScript (RGraph charts). To make it work, I am currently using the following code:

var data = new FormData();
data.append( 'action', 'charts' );
// clean the content
var myNode = document.getElementById("contentView");
while (myNode.firstChild)
{
    myNode.removeChild(myNode.firstChild);
}
// set the new content
var div = document.createElement("div");
var t = document.createElement('template');
t.innerHTML =  _connectToServer( data );
for (var i=0; i < t.content.childNodes.length; i++)
{
    var node = document.importNode(t.content.childNodes[i], true);
    div.appendChild(node);
}
document.getElementById("contentView").appendChild(div);

The problem I encountered is that this code seems to be incompatible with Microsoft Edge, and I am looking for ways to make it compatible with Edge as well.

What is the recommended solution to resolve this compatibility issue?

javascript google-chrome microsoft-edge

Answer 1

Answer №1

After consulting with our DOM team, it has come to light that the issue at hand is actually a Chrome bug in accordance with specifications.

The problem arises when innerHTML is used within a template element, as it converts the content into a DocumentFragment. Unfortunately, executable scripts are not allowed within the contents of a template element.

For further reference, here are the relevant specification links:

To resolve this issue, as previously mentioned, you will need to create a <script> tag outside of the <template> element and utilize textContent instead. Here's an example: http://jsbin.com/gizayuyape/edit?html,js,output

Alternatively, you can use the following code:

// Using textContent
var body = document.getElementsByTagName('body')[0];
var s = document.createElement('script');
s.textContent = 'document.write("Script textContent");';
body.appendChild(s);

The good news is that Chrome has addressed this interop issue starting from version 67:

Answer 2

After consulting with our DOM team, it has come to light that the issue at hand is actually a Chrome bug in accordance with specifications.

The problem arises when innerHTML is used within a template element, as it converts the content into a DocumentFragment. Unfortunately, executable scripts are not allowed within the contents of a template element.

For further reference, here are the relevant specification links:

To resolve this issue, as previously mentioned, you will need to create a <script> tag outside of the <template> element and utilize textContent instead. Here's an example: http://jsbin.com/gizayuyape/edit?html,js,output

Alternatively, you can use the following code:

// Using textContent
var body = document.getElementsByTagName('body')[0];
var s = document.createElement('script');
s.textContent = 'document.write("Script textContent");';
body.appendChild(s);

The good news is that Chrome has addressed this interop issue starting from version 67:

Using importNode in the context of Microsoft Edge involves transferring a

Answer №1

Similar questions

Adjusting the properties of an element with Javascript

The store for WrappedApp was just initialized using withRedux(MyApp) { initialState: undefined, initialStateFromGSPorGSSR: undefined }

Having trouble extracting the date modified from a JSON file

combine multiple select options values in a single function using jQuery

``When multiple elements are clicked, the second click will remove the class

Using the combination of Selenium, C#, and Chrome WebDriver can lead to Content Security Policy (CSP

When using mongoose, is it possible to add a new item and retrieve the updated array in one endpoint?

The ng-include feature seems to be malfunctioning

Despite being installed, the message 'concurrently: command not found' pops up

Images displayed alongside webpage contents

filter supabase to only show items with numbers greater than or equal to a

Issue with inheritance from Angular ModalCtrl to ServiceCtrl not functioning as expected

Using multiple MaterialUI components in a JavaScript page with React can pose challenges

Manipulating an SVG file with JavaScript

Clicking on the (x) button element will eliminate the DOM node from a list

The issue arising where the callback function fails to execute after making an AJAX POST request

Validation of a string or number that is not performing as expected

Troubleshooting: Unable to delete data using $http in AngularJS

Javascript Error - Issue with Fuse.js: e.split() function is not recognized

How can I make my modal box appear after someone clicks on selecting a college?