我认为无论如何您都不能从常规浏览器调用您的 Android API(它们没有将它们作为 DOM 模型的一部分),除非您为每个浏览器构建自己的特定扩展。这将是一项乏味的工作,而且可能不值得,因为这正是嵌入式 WebView 存在的原因(如 Phonegap)。
现在,您总是可以尝试另一种方式,即直接从您的服务器从 WebView 加载您的网页。默认情况下,webviews 从设备的本地存储中加载它们的内容,然而,使用 XHR 你可以调用你的传统网页并在 webview 中显示它们。
这可以使用可以嵌入服务器中的一段内容的 div 或 iframe 来从浏览器完全加载整个页面来实现。第二种方法将更加透明,因为您可以完全重用当前网页,但是由于跨源问题安全约束,它会阻止您与网页通信包装器。我建议第一种方法,尽管您可能必须重构您的服务器网页以使它们更好地与您的应用程序集成。
这将像这样工作(为简单起见,我使用 JQuery 的示例,但您可以直接使用 XHR 来完成):
您在 webview (phonegap 或您正在使用的任何东西)中创建一个小的 index.html 并定义一个将充当包装器来调用您的服务器:
<html>
<head>
<!-- Load all your css and javascript stuff here -->
</head>
<body>
<div id="wrapperdiv"></div>
</body>
</html>
包含一个 javascript 以从您的服务器动态加载内容:
$(function() {
$.ajax({
url: 'http://www.michaels-server.com/your-web-endpoint',
type: 'GET',
crossDomain: true,
success: function(data, textStatus, xhr) {
$('#wrapperdiv').html(data);
}
error: function() { alert("Cannot contact server."); }
});
});
配置您的嵌入式 web 视图以允许跨源请求。在 phonegap 中,您可以执行以下操作:
<widget ...>
<!-- 此处的小部件配置内容 -->
<access origin="*" />
<!-- 更多小部件配置内容 -->
</widget>
html 包装器中的 div 现在将从您的服务器动态加载内容。该页面中的任何 javascript 都可以使用嵌入式 webviews DOM 模型调用 Native API,例如 Phonegap 提供的模型。
希望这可以帮助。