javascript - webview 中的 Polyfill window.showModalDialog

Question

所以我正在创建一个带有嵌入式 <webview> 的 Chrome 应用程序元素。嵌入式 webapp 包含许多遗留代码，例如 window.showModalDialog调用(Chrome 不再支持)。

我现在要做的是填充这些调用。我创建了一个简单的测试示例:

<webview src="http://legacyCodeIsAwesome.com/" style="width:100%; height:100%"></webview>

操作webview元素的代码:

webview.addEventListener('contentload', function() {
    webview.executeScript(
      {
        code: 'window.showModalDialog = function() { console.log ("Hello, world");}',
        runAt: 'document_start'
      }
    );
  });

上面的代码运行(添加调试 console.log 有效)，只是它没有做它应该做的，即覆盖 showModalDialog。功能。

在 window 上覆盖函数是否有某种限制？网页 View 中的对象？有解决办法吗？

Answer 1

当您调用 webview.executeScript 时，您实际上创建了一个 Content Script .

内容脚本的核心原则之一是 isolated world : 内容脚本会看到 window 的单独副本对象。

Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.

因此，您的覆盖有效，但仅在内容脚本上下文中有效。

要在页面上下文本身中执行覆盖，我们需要更深入。

内容脚本可以创建 <script>页面上的元素；所述元素中的代码将在页面的上下文中执行。您可以阅读有关此技术的信息，称为页面级脚本或注入(inject)脚本，in this canonical question .

// Content script
var script = document.createElement('script');
script.textContent = `
  window.showModalDialog = function() {
    console.log("Hello, world");
  }
`;
(document.head||document.documentElement).appendChild(script);
script.remove();

---

也就是说，您注入(inject)代码的时间太晚了。在 contentload有问题的 JS 可能已经执行，并添加了 "document_start"不会让时间倒带。

幸运的是，你可以declare in advance the content scripts you want to have :

webview.addContentScripts([
  {
    name: "showModalDialogPolyfill",
    matches: ["https://webapp.example.com/*"],
    js: { files: ['content.js'] },
    run_at: 'document_start'
  }
]);
webview.src = "https://webapp.example.com/";