如何访问科尔多瓦 WKWebview ios 应用程序的 iframe 中的元素?

Posted

技术标签:

【中文标题】如何访问科尔多瓦 WKWebview ios 应用程序的 iframe 中的元素?【英文标题】:How can i access elements in a iframe of a cordova WKWebview ios app? 【发布时间】:2020-11-23 08:15:03 【问题描述】:

我想访问我们网站的元素,这些元素嵌入在我们的 ios 应用程序的 iframe 中。 它与文件访问具有相同的问题。 SecurityError: Blocked a frame with origin "file://" 访问跨域框架...

通过这个插件https://github.com/globules-io/cordova-plugin-ios-xhr解决了文件访问问题。 但是 iframe 中的访问并没有解决。

如何访问 cordova WKWebview ios 应用的 iframe 中的元素?

【问题讨论】:

【参考方案1】:

我在使用 WkWebView 的 Cordova 应用程序中遇到了类似的问题。您需要让 iframe 在您的应用程序的“同源”下运行。这是我发现的唯一解决方法。它涉及将内容直接写入 iframe,而不是给它一个 src="..."。这样,iframe 与父级同源运行。 (通过src="file://..." 加载的任何内容在 WkWebView 中都被视为唯一来源,因此会阻止任何跨框架 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 style='background-color:#eee; color:#000;'>" +
        "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);

您必须在此解决方法之外以某种方式加载网站页面的内容,例如使用 ajax 调用。

【讨论】:

以上是关于如何访问科尔多瓦 WKWebview ios 应用程序的 iframe 中的元素?的主要内容,如果未能解决你的问题,请参考以下文章

WKWebview 位置固定移动 - 科尔多瓦应用

如何更改 Ionic 2 iOS 应用程序的位置访问描述?我正在为我的应用程序使用科尔多瓦地理定位插件

iOS 10.3 WKWebView 访问照片库时崩溃

访问远程站点上的科尔多瓦

iOS:WKWebview 如何允许位于 bundle 中的 html 文件对文档目录进行读取访问

如何在 IOS 的流星科尔多瓦应用程序中使用谷歌地图