Can iframes work in WKWebView with Cordova?

问题

According to the Apache Cordova blog, iframes may not work using WKWebView. (https://cordova.apache.org/news/2018/08/01/future-cordova-ios-webview.html)

I have a Cordova application that is in the App Store that relies quite heavily on iframes. Since UIWebView is likely to be removed in iOS 13, is there a way to get iframes working using WKWebView?

Here's what I've done so far:

I tried using the Ionic WebView plugin (https://github.com/ionic-team/cordova-plugin-ionic-webview), and although it works for parts of my app it does not work on the iframe pages. Specifically, I'm getting Access-Control-Allow-Origin header contains the invalid value 'null'. I don't get this error using UIWebView.

回答1:

Add this to your Cordova config.xml

<allow-navigation href="http://*.yourdomain.com/*" />

It will allow your HTML pages, no matter root documents or children in the iframe, to redirect from localhost to a remote URL.

回答2:

Add this in your config.xml

<allow-navigation href="*" />

Then build your ios platform

回答3:

I ran into this issue also in my Cordova apps, and have found a workaround. It involves writing content directly to the iframe, rather than giving it a src="...". This way, iframe runs as same-origin as parent.

(Iframes do work in WkWebView; it's just that anything loaded via src="file://..." [e.g. all local app files] are treated as unique-origin, so tends to screw up any cross-frame JavaScript.)

function frameEl_injectHtml(frameEl, injectHtml) {
    // frameEl must exist in DOM before its contentWindow is accessible.
    if (!frameEl.contentWindow) { alert("frameInjectHtml() but frameEl not (yet or anymore) in DOM."); return; }

    frameEl.contentWindow.document.open('text/htmlreplace');
    frameEl.contentWindow.document.write(injectHtml);
    frameEl.contentWindow.document.close();
}

// Create <frame>, insert into DOM, and inject content.
var frameHtml = "<html><head></head>" +
    "<body>" +
        "iframe body" +
        "<script>window.parent.alert('iframe even same-origin as parent.');</script>" +
    "</body></html>";
var frameEl = document.createElement('iframe');
frameEl.src = "about:blank";
document.body.appendChild(frameEl);
frameEl_injectHtml(frameEl, frameHtml);

来源：https://stackoverflow.com/questions/54469341/can-iframes-work-in-wkwebview-with-cordova

标签

ios

cordova

iframe

uiwebview

wkwebview