NativeScript：禁用 iOS WebView 缩放控件的方法？

Posted 2023-04-13

【中文标题】NativeScript：禁用 iOS WebView 缩放控件的方法？

【英文标题】：NativeScript: Way to disable zoom controls for iOS WebView?

【发布时间】：2018-07-27 03:47:38

【问题描述】：

我正试图找出一种方法来防止用户通过捏合手势和双击来放大和缩小 ios WebView (tns-ios 3.4.1)，基本上禁用所有缩放，就像以前使用的 html 元标记一样在苹果让用户决定是否要使用 iOS 10 及更高版本进行缩放之前。 我找到了适用于 android here 的解决方案，但对于 iOS，它似乎并不那么简单。

我对这个平台还很陌生，目前这可能吗？我发现 NS 最近从 UIWebView 切换到了 WKWebView，我们可以使用 NativeScript 中的 allowsMagnification 属性（*with angular）吗？

【参考方案1】：

我能够从 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;
    
);

【讨论】：

你好，如果使用 nativescript-vue 会是什么样子？

我无法使用此配置在 iOS 上禁用缩放。有人知道这个问题是否在其他地方取得了任何进展？

【参考方案2】：

不，您将无法使用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
    );
;

Playground Sample

【讨论】：

有人在关于禁用缩放的 Nativescript 问题线程中提到了这样做：github.com/NativeScript/NativeScript/issues/… 不确定这是否有效，但这是你在谈论的那种事情吗？

Manoj，你的解决方案可以用纯 JS 完成吗？我不确定那里发生了什么，但是您的代码看起来是解决这个问题的最佳选择。

只需从代码中删除类型，然后一切都只是 JS。

上面有一个运行的 Playground 示例，我不确定是否检查过。

不知道你在哪里找到了这个解决方案，但它确实有效！