Question

我正在尝试在打包的应用中嵌入webview，在该webview中，我将显示一个本地页面，其中包含通过其JavaScript API获取的Google自定义搜索结果。为此，我需要能够从打包的应用程序的主页面调用webview中的函数。

然而，无法从主页面到webview进行函数调用。然后我做了一个简单的例子，函数调用仍然不起作用。我在下面列出了这些文件。

我正在尝试两种方法 - 注入代码并传递消息。虽然我可以注入代码来设置div的内容，并且它可以工作（下面的＃1），但是注入代码来调用函数不起作用（＃2），并且监听消息然后调用函数也不起作用（＃3）。

我假设从我在网上看到的这应该是可能的，所以我不确定为什么函数调用案例不起作用。如果有人能给我一些方向，说明为什么它不起作用，我会非常感激。谢谢！

的index.html

<html>
<head>
  <title>Test</title>
  <script type="text/javascript" src="scripts.js"></script>
</head>

<body>
    <input type="text" id="query1" value="test1" /><input type="button" id="submit1" value="Submit #1" />
    <input type="text" id="query2" value="test2" /><input type="button" id="submit2" value="Submit #2" />
    <input type="text" id="query3" value="test3" /><input type="button" id="submit3" value="Submit #3" />

    <webview src="wv.html" id="wv" partition="wv"></webview>
</body>
</html>

wv.html

<html>
<head>
    <script>
        function testCall(mesg) {
            document.getElementById('showtext').textContent = mesg;
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Set up message event handler:
            window.addEventListener('message', function(event) {
                // call function to display the data
                testCall(event.data);
            });
        });
    </script>
</head>

<body>

<h3>Webview:</h3>

<div id="showtext"></div>

</body>
</html>

scripts.js中

function submit1ButtonClicked() {
    document.getElementById('wv').executeScript({ code: "document.getElementById('showtext').textContent = '" + document.getElementById('query1').value + "';" });
}

function submit2ButtonClicked() {
    document.getElementById('wv').executeScript({ code: "testCall('" + document.getElementById('query2').value + "');" });
}

function submit3ButtonClicked() {
    document.getElementById('wv').contentWindow.postMessage(document.getElementById('query3').value, '*');
}

// Initialize the listeners
function initListeners() {
    document.getElementById("submit1").onclick = submit1ButtonClicked;
    document.getElementById("submit2").onclick = submit2ButtonClicked;
    document.getElementById("submit3").onclick = submit3ButtonClicked;

    document.getElementById('wv').addEventListener('message', function(event) {
        document.getElementById('showtext').textContent = event.data;
    });
}

window.onload = initListeners;

main.js

chrome.app.runtime.onLaunched.addListener(function() {
  // Center window on screen.
  var screenWidth = screen.availWidth;
  var screenHeight = screen.availHeight;
  var width = 300;
  var height = 300;

  chrome.app.window.create('index.html', {
    id: "TestWebviewID",
    bounds: {
      width: width,
      height: height,
      left: Math.round((screenWidth-width)/2),
      top: Math.round((screenHeight-height)/2)
    }
  });
});

的manifest.json

{
    "manifest_version": 2,
    "name": "TestWebview",
    "version": "1",
    "minimum_chrome_version": "25",
    "app": {
        "background": {
            "scripts": ["main.js"]
        }
    },
    "permissions": [
        "webview"
    ],
    "webview": {
        "partitions": [
            {
                "name": "wv",
                "accessible_resources": ["wv.html"]
            }
        ]
    }
}

Answer 1

关于使注入的函数调用方法（＃2）起作用，Chadyium Apps讨论列表上的Fady Samuel说：

注入<webview>的脚本生活在“孤立的世界”中。请参阅此处，了解孤立世界的概况：https://developer.chrome.com/extensions/content_scripts#execution-environment

解决方法是注入脚本标记。脚本标记中的脚本将与客户内容中的脚本在同一个世界中运行。

Answer 2

我发现如果我将以下内容添加到manifest.json中，那么传递消息（方法＃3）就可以了：

"sandbox": {
  "pages": ["wv.html"]
}

从主页面调用webview中的功能

的index.html

wv.html

scripts.js中

main.js

的manifest.json

2 个答案: