6

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.

Brad Germain
  • 597
  • 1
  • 9
  • 22
  • Have you solved this problem? – Eazy Jul 29 '19 at 04:29
  • 1
    Unfortunately, I wasn't able to resolve this. In discussing with the Cordova community, they suggested writing the iframed pages natively. We decided to rewrite the application using Xamarin. – Brad Germain Jul 30 '19 at 02:04

3 Answers3

1

Add this in your config.xml

<allow-navigation href="*" />

Then build your ios platform

Shakeel Ahmed
  • 15
  • 1
  • 6
1

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);
Brian Lukis
  • 21
  • 2
0

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.

Jam Zhang
  • 39
  • 2