javascript - 如何使用 chrome.runtime.onMessageExternal 函数回调更新 DOM

Question

我正在开发一个 Chrome 应用程序，该应用程序从扩展程序接收地址，并应该使用 webview 标记和 Chrome 运行时 API 消息发送在应用程序窗口中打开该 URL。

我正在尝试获取 chrome.window.create 回调函数来更新创建的index.html 页面。但它并没有按我的计划进行。

这是代码:

chrome.runtime.onMessageExternal.addListener(

function (request, sender, sendResponse) {

    chrome.app.window.create(

        'index.html',

        {PARAMETERS},

        function () {

            //get 
            var thisWindow = document.querySelector("webview");

            thisWindow.setAttribute("src", request.url);

        }
    );
}

index.html 文件只是一个 webview 标签和一些样式。

收到消息后，这将打开一个空窗口。但是，当我在应用程序打开时再次发送时，它会打开页面，这意味着回调可能在创建之前尝试访问 index.html 文件？

感谢您的阅读!

Answer 1

在执行创建的窗口 onload 事件 ( see here ) 之前调用 window.create 回调函数。所以想必 DOM 现阶段还不可用。您可以做的是将您的修改绑定(bind)到创建的 Windows onload 事件，从而确保 DOM 可用。

chrome.app.window.create(
    'index.html', 
    {
        PARAMETERS
    },
    function (createdWindow) {
        var contentWindow = createdWindow.contentWindow;
        contentWindow.onload = function() {
            var thisWindow = contentWindow.document.querySelector("webview");
            thisWindow.setAttribute("src", request.url);
        }
    }
);