WKWebView-Äquivalent für UIWebViews scalePageToFit


92

Ich aktualisiere meine iOS-App, um sie UIWebViewdurch zu ersetzen WKWebView. Ich verstehe jedoch nicht, wie ich das gleiche Verhalten erreichen kann WKWebView. Mit habe UIWebViewich dafür scalesPageToFitgesorgt, dass der Web-Pag mit der gleichen Größe wie die Bildschirmgröße angezeigt wurde (um im Vollbildmodus ohne Scrollen zu erscheinen).

Ich habe diese Lösung im Web gefunden, aber sie funktioniert nicht:

- (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];
}

Versuchen Sie Folgendes: 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];Ersetzen Sie Ihren Code durch den obigen Code.
22.

Ich habe es versucht, aber ich habe das gleiche Ergebnis (übrigens, die stringByEvaluatingJavaScriptFromString-Methode existiert nicht in WKWebView, also habe ich meinen
evaluJavaScript

1
Hast du eine Lösung bekommen?
anoop4real

Antworten:


126

Sie können auch das WKUserScript ausprobieren.

Hier ist meine Arbeitskonfiguration:

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];

Sie können Ihrer WKWebViewConfiguration eine zusätzliche Konfiguration hinzufügen.


2
Klappt wunderbar. Danke
Nithin Pai

2
Funktioniert hervorragend für mich - nur geringfügige Änderungen haben WKUserScriptInjectionTimeAtDocumentEnd in WKUserScriptInjectionTimeAtDocumentStart geändert
sckor

1
Wenn ich WKUserScriptInjectionTimeAtDocumentEndzu WKUserScriptInjectionTimeAtDocumentStartdann wechsle , funktioniert es bei mir nicht. Dieses Skript wird nicht hinzugefügt. irgendeinen Grund?
Mahesh K

2
Schöne Antwort, aber ich würde auch dieses Skript hinzufügen, um zu vermeiden, dass das Webkit die Schriftgrößen selbst ändert:var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);
José Manuel Sánchez

1
Das hat super geklappt. Ich habe versucht, einen speziellen Titel mit WKWebView an Auto Layout auszurichten. Die Höhe des Elements von offsetHeight wurde immer wieder zu groß, bis ich dieses Skript hinzufügte. Danke für die Hilfe.
JamWils

44

Echo der Antwort von nferocious76 im schnellen Code: Swift2.x-Version

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-Version

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

Ähnlich wie bei @ nferocious76, jedoch in Swift-Sprache

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)

Vielen Dank! Dies löste auch mein Problem, die HTML-Schriftgröße größer zu machen, und wurde nicht von klein nach groß aktualisiert. Ich verwende dies, um die Schriftgröße und das innere Layout des Inhalts zu "aktualisieren".
Nadi Hassan

12

C # -Version zur Verwendung in 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);

Arbeite wie Charme!
Divyesh_08

Wie sieht der benutzerdefinierte Renderer aus? Erben Sie von WkWebViewRenderer? Weil Controlsowie SetNativeControl()sind unbekannt ...
Testen

Ok, es scheint, dass Sie von erben ViewRenderer<CustomWebView, WKWebView>und verwenden müssen OnElementChanged(ElementChangedEventArgs<CustomWebView> e).
Testen

8

Ich habe es unten herausgefunden. Damit der Inhalt an die Gerätegröße angepasst wird.

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-Lösung:

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)

0

// 100% Arbeit für mich

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

Keine dieser Antworten funktionierte für mich. Ich habe versucht, eine Amazon-URL für einen bestimmten Künstler zu öffnen. Es stellt sich heraus, dass Amazon eine auf Mobilgeräte reagierende URL und eine Desktop-URL hat. Auf Desktop Safari habe ich als Benutzeragent auf iPhone gewechselt (Entwickeln> Benutzeragent> Safari - iOS 13.1.3 - iPhone) und die entsprechende URL für Mobilgeräte erhalten.


0

Bei dieser Arbeit für mich habe ich zwei Attribute in Meta hinzugefügt : initial-scale=1.0, shrink-to-fit=yes, die helfen, Text mit HTML zu verbinden, haben ein großes Bild in 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)
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.