在PhoneGap中打开网址的方法 - 使用Webview

Question

在PhoneGap中打开网址的方法 - 使用Webview

androidcordovawebviewphonegap-pluginsphonegap-build

15

我想知道如何在嵌入式Webview应用程序上下文中打开URL。当前的演示将在外部浏览器中打开一个新选项卡，这不是我期望的结果。我仅使用google.com进行测试。

总之，我正在寻找一个可行的演示。

<?xml version="1.0" encoding="UTF-8"?>

<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns     = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        xmlns:android = "http://schemas.android.com/apk/res/android"
        id        = "com.xxx.xxxxx"
        version   = "1.0.0">

    <preference name="stay-in-webview" value="true" />

    <access origin="*" browserOnly="true" subdomains="true" />

    <content src="index.html" />

    <allow-navigation href="https://google.com/*" />

    <gap:plugin name="cordova-plugin-whitelist" source="npm" version="~1" />
    <gap:plugin name="org.apache.cordova.inappbrowser" />
    <gap:plugin name="org.apache.cordova.splashscreen" />

    <preference name="phonegap-version"           value="cli-5.4.1" />
    <preference name="permissions"                value="none"/>
    <preference name="target-device"              value="universal"/>
    <preference name="fullscreen"                 value="true"/>

</widget>

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>
    <body>
        <div>
            <script type="text/javascript" charset="utf-8">
                document.addEventListener("deviceready", onDeviceReady, false);

                function onDeviceReady() {
                    window.location.href = 'https://google.com';
                }
            </script>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
    </body>
</html>

更新：完整的xml文件： https://codeshare.io/Vw3Fl

- user2990084

你所拥有的代码永远不会起作用。
如果你正在打开一个外部URL，以便你的应用程序作为网站包装器工作，那么你的应用程序可能会被应用商店拒绝。 Cordova/Phonegap 的一个常见错误是在设计应用程序时，认为phonegap像网站或Web浏览器一样工作。

- user3255670

@jcesarmobile 目前问题在于操作系统。在 Android 中，使用 InAppBrowser 的 window.open 可以正常工作，您的回答也有效。然而，两者在 iOS 上都失败了。在 iPhone 上，当打开 Webview 时我只会得到一个空白页面。 - user2990084

6个回答

8

您需要在config.xml中添加此行以允许导航到外部URL。

<allow-navigation href="*" />

这将允许导航到任何外部url，如果你只想允许导航到Google，则添加此行。

<allow-navigation href="https://google.com" />

你可以在插件页面查看其余文档。 https://github.com/apache/cordova-plugin-whitelist。

- jcesarmobile

3

如果您在使用Phonegap 6.3.1时遇到此问题，您应该正确地将URL列入白名单，并使用{{link1：cordova-plugin-inappbrowser插件}}。

请继续阅读了解如何操作。

首先，请确保您已将要打开的URL添加到项目根目录下config.xml文件中的<access>标签、<allow-intent>标签和allow-navigation标签的hrefs中，以便将其列入白名单。类似以下内容：

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0"
        xmlns="http://www.w3.org/ns/widgets"
        xmlns:gap="http://phonegap.com/ns/1.0">

    ...

    <access origin="*" />
    <allow-intent href="*" />
    <allow-navigation href="*" />

    ...

</widget>

(Note: 上述 href 中的 "*" 允许打开任何 url/path。在生产环境中，您可能希望限制只能打开特定的 url/path)

接下来，在您的 index.html 文件中添加以下 javascript：

<script type="text/javascript">
    document.addEventListener('deviceready', function() {
        var url = 'https://www.google.com' // change to whatever you want
        cordova.InAppBrowser.open(url, '_self', 'location=no');
    }, false)
</script>

这个脚本使用 cordova-plugin-inappbrowser 插件，如果你使用标准的 Phonegap 模板生成应用程序，则该插件应该已经包含在您的 config.xml 文件中。

该脚本等待设备就绪，然后使用 cordova-plugin-inappbrowser 插件打开给定的 URL。 '_self' 参数意味着它在 Phonegap webview 中打开页面，'location=no' 表示没有地址栏。其他参数选项请参阅 cordova-plugin-inappbrowser 插件的文档（上面的链接）。

最后，为了在适当的模拟器中测试应用程序（假设您已安装 Phonegap CLI），请运行以下命令：

phonegap run ios --verbose --stack-trace
phonegap run android --verbose --stack-trace

- Neil Atkinson

0

通过在您的项目目录中键入以下命令安装以下插件

phonegap plugin add cordova-plugin-whitelist
phonegap prepare

然后在index.html中添加以下标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' gap:; style-src 'self' 'unsafe-inline'; media-src *" />
<style>
*{
    margin: 0px;
    padding: 0px;
 } body {width:100%;height:100%;margin:0;overflow:hidden;background-
 color:#252525;}
 #my_iframe{
  border: 0px;
  height: 100vh;
  width: 100%;
  }
  </style>
<title>ProjectName</title>
</head>

<body>
<iframe src="PUT_HERE_YOUR_PROJECT_URL" id="my_iframe" frameborder="0" width="100%" height="100%" >
</iframe>   
</body>

</html>

- Ahmed Mahmoud

0

您可能需要将以下内容添加到您的PhoneGap XML文件中：

<?xml version="1.0" encoding="UTF-8"?>
<phonegap>
    <access origin="https://abcx.com" subdomains="true" />
</phonegap>

- apollosoftware.org

0

在PhoneGap应用程序中以非常简单的方式打开系统浏览器中的页面是通过在iframe中呈现该页面。

<iframe src="http://www.google.com></iframe>

您可以使用DOM更新更改iframe中的URL。

这将在本地系统浏览器中加载页面。

- Abhishek Jain

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tnt-rox · Accepted Answer

20

尝试:

window.open('https://google.com', '_self ', 'location=yes');

替代：

window.location.href = 'https://google.com';

这将使用InAppBrowser，并将_self作为目标。

- tnt-rox

谢谢。显然适用于Android，但不适用于IOS。 - user2990084

请问您能确认一下 IOS 版本吗？ - user2990084

你已经将 InAppBrowser 插件添加到 iOS 上了吗？ - tnt-rox

是的，我有。这是我的XML。https://codeshare.io/Vw3Fl 这个配置在IOS上不起作用。 - user2990084

你好，你可以尝试将第二个参数改为_system而不是_self。这将强制应用程序使用默认系统浏览器打开Google。 - tnt-rox

显示剩余3条评论