Динамически вводить JavaScript Модули в Edge Browser - PullRequest
Новая
       7

Динамически вводить JavaScript Модули в Edge Browser

0 голосов
/ 11 февраля 2020

Я создал небольшую демонстрацию здесь: https://codepen.io/min-width/pen/LYVVLwK

Но на всякий случай, если он потерян во времени, вот JavaScript с этой страницы (он создает тег скрипта с типом «module» и введением его на страницу): 

let value = `<script type="module">
  let element = document.createElement("p");
  element.appendChild(document.createTextNode("The JavaScript executed."));
  document.querySelector("body").appendChild(element);
</scr` + `ipt>`;
let compiled =
    document.createRange().createContextualFragment(value),
    body = document.querySelector('body');
body.appendChild(compiled);

При работе в теле страницы должно быть написано «Выполнено JavaScript». Это прекрасно работает в большинстве браузеров (и я признаю, что это не работает в IE, поскольку IE вообще не поддерживает модули).

Моя проблема в том, что это не работает в Edge, даже если Edge поддерживает JavaScript модулей: https://caniuse.com/#feat = es6-module

Edge просто не нравится, когда модули вводятся динамически , Есть ли обходной путь на стороне клиента для этого? В настоящее время он работает с серверной проверкой «Edge» в пользовательском агенте (в этом случае я немедленно отображаю модуль в HTML, а не внедряю его в JavaScript), но это не похоже на оптимальное решение.

В случае, если вам интересно, мой вариант использования состоит в том, что я предварительно загружаю некоторые JavaScript модули, а затем внедряю их в страницу, когда пользователь впервые взаимодействует со страницей (оптимизация скорости страницы, которая PageSpeed ​​Insights, похоже, нравится).

Редактировать: Так как кто-то спросил, вот информация о номере версии Edge (из настроек):

Screenshot of Edge version number

Показывает Edge 44 и Edge HTML 18.

1 Ответ

1 голос
/ 11 февраля 2020

Я пытался изменить ваш код, и он работает с версией MS Edge 44. 

<!DOCTYPE html>
<html>
<head>
<title>Demo page</title>

</head>
<body>


<script>
let se =document.createElement('script');
se.setAttribute('type', 'module');
se.innerHTML='var para = document.createElement("P"); para.appendChild (document.createTextNode("The JavaScript executed.")); document.querySelector("body").appendChild(para);';

let body = document.querySelector('body');
body.append(se);

</script>
 
</body>
</html>

Вывод в браузере Edge:

enter image description here

...