1

Following code has different results in safari vs chrome vs firefox.

var noscript = document.getElementsByTagName('noscript')[0];
console.log(noscript.innerHTML);

Result in Chrome:

<img alt="***" title="***" src="***" width="***" height="***" srcset="***" sizes="***"  />

Result in Firefox:

<img alt=\"***\" title=\"***\" src=\"***\" width=\"***\" height=\"***\" srcset=\"***\" sizes=\"***\"  />

Result in Safari:

&lt;img alt="***" title="***" src="***" sizes="***"  /&gt;

How can one create and inject a valid img element cross browser?

Following works in Chrome & Firefox

noscript.insertAdjacentHTML('beforebegin',noscript.innerHTML);

Following works in safari

var html = new DOMParser().parseFromString(noscript.innerHTML, "text/html");
noscript.insertAdjacentHTML('beforebegin',html.documentElement.innerText);
Quisse
  • 646
  • 1
  • 6
  • 24

1 Answers1

0

You can use multiple client detection and compatibility detection techniques out there to detect the browser and then execute the correct code for each situation. https://stackoverflow.com/a/9851769/10905239

Mehdi Babapour
  • 69
  • 1
  • 6