Merge pull request #3980 from NativeScript/web-view-query-params

Web view query params
This commit is contained in:
Alexander Vakrilov
2017-04-12 13:58:41 +03:00
committed by GitHub
7 changed files with 95 additions and 36 deletions

View File

@ -13,6 +13,7 @@ export function pageLoaded(args: EventData) {
examples.set("webview", "web-view/web-view");
examples.set("webtest", "web-view/web-view-test");
examples.set("query", "web-view/query-params");
let viewModel = new SubMainPageViewModel(wrapLayout, examples);
page.bindingContext = viewModel;

View File

@ -0,0 +1,38 @@
import { WebView } from "tns-core-modules/ui/web-view";
import * as fs from "tns-core-modules/file-system";
let webView: WebView;
export function webViewLoaded(args) {
webView = args.object;
}
const relUrl = "~/ui-tests-app/web-view/query.html" + "?foo=bar&urlType=relative";
const absoluteUrl = `${fs.knownFolders.currentApp().path}/ui-tests-app/web-view/query.html` + "?foo=bar&urlType=absolute";
const fileUrl = `file:///${fs.knownFolders.currentApp().path}/ui-tests-app/web-view/query.html` + "?foo=bar&urlType=filePrefix";
const htmlString = `<html>
<head>
<title>Test Page</title>
<meta charset="utf-8" />
</head>
<body>
<div style="color:green" id="result">Just a string ...</div>
</body>
</html>`;
export function loadRelative() {
setSrc(relUrl)
}
export function loadAbsolute() {
setSrc(absoluteUrl)
}
export function loadFile() {
setSrc(fileUrl)
}
export function loadString() {
setSrc(htmlString)
}
function setSrc(src) {
console.log("Setting src to: " + src);
webView.src = src;
}

View File

@ -0,0 +1,10 @@
<Page>
<GridLayout rows="* auto" columns="* * * *">
<WebView colSpan="3" src="someUrl | pathToLocalFile | htmlString" loaded="webViewLoaded" />
<Button row="1" col="0" text="rel" tap="loadRelative"/>
<Button row="1" col="1" text="abs" tap="loadAbsolute"/>
<Button row="1" col="2" text="file" tap="loadFile"/>
<Button row="1" col="3" text="str" tap="loadString"/>
</GridLayout>
</Page>

View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<meta charset="utf-8" />
</head>
<body>
<h3>Result</h3>
<div style="color:green" id="result">No value yet</div>
<script type="text/javascript" charset="utf-8">
function getParameterByName(name) {
url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var res = document.getElementById("result");
res.innerHTML = "foo: " + getParameterByName("foo") + "<br>" + "urlType: " + getParameterByName("urlType");
</script>
</body>
</html>

View File

@ -1,6 +1,5 @@
import { WebView as WebViewDefinition, LoadEventData, NavigationType } from ".";
import { View, Property } from "../core/view";
import { isFileOrResourcePath } from "../../utils/utils";
import { File, knownFolders, path } from "../../file-system";
export { File, knownFolders, path, NavigationType };
@ -38,9 +37,7 @@ export abstract class WebViewBase extends View implements WebViewDefinition {
this.notify(args);
}
abstract _loadFileOrResource(path: string, content: string): void;
abstract _loadHttp(src: string): void;
abstract _loadUrl(src: string): void;
abstract _loadData(src: string): void;
@ -66,28 +63,28 @@ export abstract class WebViewBase extends View implements WebViewDefinition {
[srcProperty.setNative](src: string) {
this.stopLoading();
if (isFileOrResourcePath(src)) {
if (src.indexOf("~/") === 0) {
src = path.join(knownFolders.currentApp().path, src.replace("~/", ""));
}
// Add file:/// prefix for local files.
// They should be loaded with _loadUrl() method as it handles query params.
if (src.indexOf("~/") === 0) {
src = `file:///${knownFolders.currentApp().path}/` + src.substr(2);
} else if (src.indexOf("/") === 0) {
src = "file://" + src;
}
if (File.exists(src)) {
let file = File.fromPath(src);
let content = file.readTextSync();
this._loadFileOrResource(src, content);
}
} else if (src.toLowerCase().indexOf("http://") === 0 || src.toLowerCase().indexOf("https://") === 0) {
this._loadHttp(src);
if (src.toLowerCase().indexOf("http://") === 0 ||
src.toLowerCase().indexOf("https://") === 0 ||
src.toLowerCase().indexOf("file:///") === 0) {
this._loadUrl(src);
} else {
this._loadData(src);
}
}
get url() : string {
throw new Error("Property url of WebView is deprecated. Use src istead");
get url(): string {
throw new Error("Property url of WebView is deprecated. Use src instead");
}
set url(value:string){
throw new Error("Property url of WebView is deprecated. Use src istead")
set url(value: string) {
throw new Error("Property url of WebView is deprecated. Use src instead")
}
}

View File

@ -115,17 +115,7 @@ export class WebView extends WebViewBase {
super.resetNativeView();
}
public _loadFileOrResource(path: string, content: string) {
const nativeView = this.nativeView;
if (!nativeView) {
return;
}
const baseUrl = `file:///${path.substring(0, path.lastIndexOf('/') + 1)}`;
nativeView.loadDataWithBaseURL(baseUrl, content, "text/html", "utf-8", null);
}
public _loadHttp(src: string) {
public _loadUrl(src: string) {
const nativeView = this.nativeView;
if (!nativeView) {
return;

View File

@ -109,12 +109,7 @@ export class WebView extends WebViewBase {
this._ios.stopLoading();
}
public _loadFileOrResource(path: string, content: string) {
var baseURL = NSURL.fileURLWithPath(NSString.stringWithString(path).stringByDeletingLastPathComponent);
this._ios.loadHTMLStringBaseURL(content, baseURL);
}
public _loadHttp(src: string) {
public _loadUrl(src: string) {
this._ios.loadRequest(NSURLRequest.requestWithURL(NSURL.URLWithString(src)));
}