NativeScript:禁用 iOS WebView 的缩放控件的方法?
NativeScript: Way to disable zoom controls for iOS WebView?
我正在尝试找出一种方法来防止用户通过捏手势和双击在 iOS WebView (tns-ios 3.4.1) 上放大和缩小,本质上是禁用所有缩放都像 html 元标记在 apple 去让用户决定是否要使用 iOS 10 及以上缩放之前所做的那样。
我为 android 找到了一个解决方案,但对于 iOS 它似乎并不那么简单。
我是这个平台的新手,目前可以吗?我发现 NS 最近从 UIWebView 切换到 WKWebView,我们可以从 NativeScript 以某种方式使用 allowsMagnification 属性 (*with angular)?
不,您将无法使用 allowsMagnification
。您将扩展到您自己的 WebView 组件版本,以便更新元配置以停止缩放。
更新:
必须修改从 {N} 核心模块 (v5.x) 注入的默认视口以禁用缩放,这是如何完成的。
import { WebView } from 'tns-core-modules/ui/web-view';
declare var WKUserScript, WKUserScriptInjectionTime, WKUserContentController, WKWebViewConfiguration, WKWebView, CGRectZero;
(<any>WebView.prototype).createNativeView = function () {
const jScript = `var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'initial-scale=1.0 maximum-scale=1.0');
document.getElementsByTagName('head')[0].appendChild(meta);`;
const wkUScript = WKUserScript.alloc().initWithSourceInjectionTimeForMainFrameOnly(jScript, WKUserScriptInjectionTime.AtDocumentEnd, true);
const wkUController = WKUserContentController.new();
wkUController.addUserScript(wkUScript);
const configuration = WKWebViewConfiguration.new();
configuration.userContentController = wkUController;
configuration.preferences.setValueForKey(
true,
"allowFileAccessFromFileURLs"
);
return new WKWebView({
frame: CGRectZero,
configuration: configuration
});
};
我能够从 NS 3.3 - 4.1
获取您的#webview 参考,然后为 ios 和 android 设置这些属性以修复视图缩放。
let webView: WebView = this.webView.nativeElement;
webView.on(WebView.loadStartedEvent, function (args: LoadEventData) {
if (webView.android) {
webView.android.getSettings().setBuiltInZoomControls(false);
webView.android.getSettings().setDisplayZoomControls(false);
} else {
webView.ios.scrollView.minimumZoomScale = 1.0;
webView.ios.scrollView.maximumZoomScale = 1.0;
webView.ios.scalesPageToFit = false;
webView.ios.scrollView.bounces = false;
}
});
我正在尝试找出一种方法来防止用户通过捏手势和双击在 iOS WebView (tns-ios 3.4.1) 上放大和缩小,本质上是禁用所有缩放都像 html 元标记在 apple 去让用户决定是否要使用 iOS 10 及以上缩放之前所做的那样。
我为 android
我是这个平台的新手,目前可以吗?我发现 NS 最近从 UIWebView 切换到 WKWebView,我们可以从 NativeScript 以某种方式使用 allowsMagnification 属性 (*with angular)?
不,您将无法使用 allowsMagnification
。您将扩展到您自己的 WebView 组件版本,以便更新元配置以停止缩放。
更新:
必须修改从 {N} 核心模块 (v5.x) 注入的默认视口以禁用缩放,这是如何完成的。
import { WebView } from 'tns-core-modules/ui/web-view';
declare var WKUserScript, WKUserScriptInjectionTime, WKUserContentController, WKWebViewConfiguration, WKWebView, CGRectZero;
(<any>WebView.prototype).createNativeView = function () {
const jScript = `var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'initial-scale=1.0 maximum-scale=1.0');
document.getElementsByTagName('head')[0].appendChild(meta);`;
const wkUScript = WKUserScript.alloc().initWithSourceInjectionTimeForMainFrameOnly(jScript, WKUserScriptInjectionTime.AtDocumentEnd, true);
const wkUController = WKUserContentController.new();
wkUController.addUserScript(wkUScript);
const configuration = WKWebViewConfiguration.new();
configuration.userContentController = wkUController;
configuration.preferences.setValueForKey(
true,
"allowFileAccessFromFileURLs"
);
return new WKWebView({
frame: CGRectZero,
configuration: configuration
});
};
我能够从 NS 3.3 - 4.1
获取您的#webview 参考,然后为 ios 和 android 设置这些属性以修复视图缩放。
let webView: WebView = this.webView.nativeElement;
webView.on(WebView.loadStartedEvent, function (args: LoadEventData) {
if (webView.android) {
webView.android.getSettings().setBuiltInZoomControls(false);
webView.android.getSettings().setDisplayZoomControls(false);
} else {
webView.ios.scrollView.minimumZoomScale = 1.0;
webView.ios.scrollView.maximumZoomScale = 1.0;
webView.ios.scalesPageToFit = false;
webView.ios.scrollView.bounces = false;
}
});