与UIWebView的scalesPageToFit等效的WKWebView


92

我正在更新我的iOS应用,以替换UIWebViewWKWebView。但是我不明白如何使用来实现相同的行为WKWebView。使用,UIWebViewscalesPageToFit可以确保以与屏幕大小相同的大小显示Web页(以便在不滚动的情况下显示为全屏)。

我在网上发现了该解决方案,但是它不起作用:

- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
    NSString *javascript = @"var meta = document.createElement('meta');meta.setAttribute('name', 'viewport');meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');document.getElementsByTagName('head')[0].appendChild(meta);";
    [webView evaluateJavaScript:javascript completionHandler:nil];
}

试试看: NSString* js = @"var meta = document.createElement('meta'); " "meta.setAttribute( 'name', 'viewport' ); " "meta.setAttribute( 'content', 'width = device-width' ); " "document.getElementsByTagName('head')[0].appendChild(meta)"; [webView stringByEvaluatingJavaScriptFromString: js];用上面的代码替换您的代码。
2014年

我尝试了一下,但是得到了相同的结果(顺便说一句,WKWebView中不存在stringByEvaluatingJavaScriptFromString方法,因此我保留了对我的validateJavaScript:completionHandler的调用
olinsha 2014年

1
你有解决办法吗?
anoop4real

Answers:


126

您也可以尝试WKUserScript。

这是我的工作配置:

NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";

WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addUserScript:wkUScript];

WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
wkWebConfig.userContentController = wkUController;

wkWebV = [[WKWebView alloc] initWithFrame:self.view.frame configuration:wkWebConfig];

您可以将其他配置添加到WKWebViewConfiguration。


2
奇迹般有效。谢谢
Nithin Pai 2015年

2
对我而言效果很好-只需稍作调整即可将WKUserScriptInjectionTimeAtDocumentEnd更改为WKUserScriptInjectionTimeAtDocumentStart
sckor

1
如果我更改WKUserScriptInjectionTimeAtDocumentEnd为,WKUserScriptInjectionTimeAtDocumentStart则对我不起作用。它不会添加此脚本。任何原因?
Mahesh K

2
尼斯的答案,但我也该脚本本身添加,以避免webkit的改变字体大小:var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);
若泽·曼努埃尔·桑切斯

1
效果很好。我试图使用WKWebView将特殊标题与“自动布局”对齐。从offsetHeight元素的高度一直回到太大,直到我添加此脚本。谢谢您的帮助。
JamWils

44

nferocious76的回答,以快速代码显示:Swift2.x版本

let jscript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"
let userScript = WKUserScript(source: jscript, injectionTime: WKUserScriptInjectionTime.AtDocumentEnd, forMainFrameOnly: true)
let wkUController = WKUserContentController()
wkUController.addUserScript(userScript)
let wkWebConfig = WKWebViewConfiguration()
wkWebConfig.userContentController = wkUController
let youWebView = WKWebView(frame: CGRectZero, configuration: wkWebConfig)

swift3版本

let jscript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"
let userScript = WKUserScript(source: jscript, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
let wkUController = WKUserContentController()
wkUController.addUserScript(userScript)
let wkWebConfig = WKWebViewConfiguration()
wkWebConfig.userContentController = wkUController
let yourWebView = WKWebView(frame: self.view.bounds, configuration: wkWebConfig)

20

与@ nferocious76相似,但使用Swift语言

var scriptContent = "var meta = document.createElement('meta');"
scriptContent += "meta.name='viewport';"
scriptContent += "meta.content='width=device-width';"
scriptContent += "document.getElementsByTagName('head')[0].appendChild(meta);"

webView.evaluateJavaScript(scriptContent, completionHandler: nil)

谢谢!这也解决了我的问题,使html字体大小变大,没有从小到大刷新。我正在使用它来“刷新”内容字体大小和内部布局。
纳迪·哈桑

12

C#版本,用于Xamarin Custom Renderer:

string jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";

WKUserScript wkUScript = new WKUserScript((NSString)jScript, WKUserScriptInjectionTime.AtDocumentEnd, true);
WKUserContentController wkUController = new WKUserContentController();
wkUController.AddUserScript(wkUScript);

WKWebViewConfiguration wkWebConfig = new WKWebViewConfiguration();
wkWebConfig.UserContentController = wkUController;
WKWebView webView=new WKWebView(Frame, wkWebConfig);

像魅力一样工作!
Divyesh_08

自定义渲染器的外观如何?你是继承人WkWebViewRenderer吗?因为Control以及SetNativeControl()未知...
测试

好的,看来您需要继承ViewRenderer<CustomWebView, WKWebView>并使用OnElementChanged(ElementChangedEventArgs<CustomWebView> e)
测试

8

我想通了灵魂。用于使内容适合设备尺寸。

func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {     for making the content to fit with the device size
    let jscript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"
    webView.evaluateJavaScript(jscript)
}


1

Swift 5解决方案:

let javaScript = """
    var meta = document.createElement('meta');
                meta.setAttribute('name', 'viewport');
                meta.setAttribute('content', 'width=device-width');
                document.getElementsByTagName('head')[0].appendChild(meta);
    """

webView.evaluateJavaScript(javaScript)

1

对于我来说,这项工作非常有效,我在meta中添加了两个属性:initial-scale=1.0, shrink-to-fit=yes,这有助于使html文本适合HTML中的图像。

let jscript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width, initial-scale=1.0, shrink-to-fit=yes'); document.getElementsByTagName('head')[0].appendChild(meta);"
        
let userScript = WKUserScript(source: jscript, injectionTime: .atDocumentEnd, forMainFrameOnly: true)

let wkUController = WKUserContentController()
        
wkUController.addUserScript(userScript)
        
let wkWebConfig = WKWebViewConfiguration()
        
wkWebConfig.userContentController = wkUController

self.webView = WKWebView(frame: self.view.bounds, configuration: wkWebConfig)

0

// 100%为我工作

func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
    //print(#function)
    let scriptFontSizeAdjustment = "var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);"

    let scriptImgSizeAdjustment = "var style = document.createElement('style');style.innerHTML = 'img { display: inline;height: auto;max-width: 100%; }';document.getElementsByTagName('head')[0].appendChild(style);"

    webKitView.evaluateJavaScript(scriptFontSizeAdjustment)
    webKitView.evaluateJavaScript(scriptImgSizeAdjustment)

}

0

这些答案都不对我有用。我试图为特定艺术家打开亚马逊URL。事实证明,亚马逊具有移动响应URL和桌面URL。在桌面Safari上,我更改为iPhone作为用户代理(“开发”>“用户代理”>“ Safari-iOS 13.1.3-iPhone”),并获得了适用于移动设备的URL。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.