Nativescript裸露的webview似乎不起作用 [英] Nativescript bare webview doesnt seem to work

问题描述

我最近接触了nativescript，但遇到了一个我似乎无法解决的问题.

i recently got into nativescript, and i'm facing a problem that i cant seem to work around it.

我要完成的工作就是打开一个基本的WebView并设置要加载的外部URL，例如stackoverflow.com.

What i want to accomplish is to just open a basic WebView and set an external url to load such as stackoverflow.com.

我正在使用 Android api 17

app.js

var application = require("application");
application.mainModule = "main-page";
application.cssFile = "./app.css";
application.start();

main-page.js

var vmModule = require("./main-view-model");
var webViewModule = require("ui/web-view");
var webView = new webViewModule.WebView();

function pageLoaded(args) {
    var page = args.object;
    var web = page.getViewById(webViewModule.WebView,"webView");
    web.url="http://google.com";

}
exports.pageLoaded = pageLoaded;

main-page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <StackLayout>
    <WebView id="webView" colSpan="4" row="2"/>
  </StackLayout>
</Page>

我还检查了INTERNET权限是否设置为application，并且是否启用了它.

i also checked the if the INTERNET permission is set to application , and yes its enabled.

应用程序也停止运行，并且命令

Also application stops working, and the command

tns运行android --emulator

在模拟器上成功安装并运行应用程序后，它只是垃圾邮件，输出很多.

after successfully installing and running the application on emulator it just spams with a lot of output.

您能帮助我了解应该如何工作吗?

Can you help me to understand how exactly is supposed to be working?

推荐答案

tl; dr用于其他人对WebView有问题

由于某些原因您不能将WebView放入StackLayout ，它根本不会显示.请改用GridLayout.

tl;dr for others having problems with WebView

For some reason you can't put a WebView in a StackLayout, it simply does not show. Use a GridLayout instead. There's a GitHub issue on this.

Android模拟器确实很健谈，但是在该日志中的某个位置(很可能是最后一个)，几乎可以肯定是有错误的堆栈跟踪.如果您使用的是Mac，则iOS模拟器的聊天功能要少得多.

The Android emulator is really chatty but somewhere in that log (most probably in the end) there's almost certainly a stack trace with the error. If you're running a Mac, the iOS emulator is much less chatty.

也就是说，让我们修复您的代码.下面是有效的代码，已注释以显示对代码所做的更改.

That said, let's fix your code. Below is working code, commented to show the changes to your code.

app.js

没有问题，看起来应该一样！

No problem there, looking as it should!

main-page.js

/**
 * Do you actually have a file called 'main-view-model.js' in the same
 * folder as this file? In any case, it's not used in your example code
 * so I commented it out.
 */
//var vmModule = require("./main-view-model");
var webViewModule = require("ui/web-view");

/**
 * Here you are creating a NEW webview. If you want to, you can create
 * element dynamically and then attach them to the view. However, in your
 * example you already have a webview in your xml file so there's no need
 * to create a new one.
 */
//var webView = new webViewModule.WebView();

function pageLoaded(args) {
    var page = args.object;
    /**
     * Corrected the line below. What you're doing here is pretty
     * much equal to $('#webView') in jQuery. You're selecting
     * an element
     */
    var web = page.getViewById("webView");
    //var web = page.getViewById(webViewModule.WebView,"webView");
    web.url = "http://google.com";

}
exports.pageLoaded = pageLoaded;

main-page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
    <GridLayout>
        <WebView id="webView" />
    </GridLayout>
</Page>

所以我在这里做了几件事.首先，我删除了colSpan="4" row="2".这两个参数仅用于 GridLayouts ，并且您正在使用StackLayout. 但是如您所见，我已经将StackLayout更改为GridLayout.原因是由于某种原因您不能将WebView放在StackLayout中，它根本不显示.

So I've done a couple of things here. First, I've removed the colSpan="4" row="2". Those two parameters are only used for GridLayouts, and you're using a StackLayout. However as you can see I've changed your StackLayout into a GridLayout. Reason for this is that for some reason you can't put a WebView in a StackLayout, it simply does not show. There's a GitHub issue on this.

如果您要做的只是创建一个显示Google的WebView，则可以直接在XML中直接设置url属性.如果您以这种方式进行操作，则甚至不需要Java脚本.当然，如果要动态设置URL，则需要使用Javascript进行设置.

If all you want to do is to create a WebView showing Google, you can just set the url property directly in the XML. If you're doing it this way you don't even need the Javascript. Of course, if you want to dynamically set the url you need to do it from the Javascript.

设置url属性的示例:

Example of setting url property:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
    <GridLayout>
        <WebView id="webView" url="http://www.google.com" />
    </GridLayout>
</Page>

这篇关于Nativescript裸露的webview似乎不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！