无法将消息发布到 file://。收件人的来源为空，在 Cordova WKWebView 引擎页面上答案

【问题标题】：Unable to post message to file://. Recipient has origin null, on Cordova WKWebView engine page无法将消息发布到 file://。收件人的来源为空，在 Cordova WKWebView 引擎页面上
【发布时间】：2019-12-03 14:01:31
【问题描述】：

我正在尝试使用 Cordova 在 swift 应用程序中加载 WKWebView 页面。该页面包含一些运行window.postMessage("some message", self.location.href); 并失败的javascript 代码 - 无法将消息发布到文件：//。收件人的来源为空。我注意到 window.origin 返回 null，而与 window.origin 返回 file:// 的 UIWebview 引擎相比。

CordovaVC.swift：

import UIKit

class CordovaVC: CDVViewController {

    override func viewDidLoad() {
        self.wwwFolderName = "./"
        self.startPage = "/index1.html"

        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

config.xml：

<?xml version='1.0' encoding='utf-8'?>
 <widget id="com.example.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" 
xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloWorld</name>
<description>
    A sample Apache Cordova application that responds to the deviceready event.
</description>
<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<feature name="Console">
       <param name="ios-package" value="CDVLogger" />
       <param name="onload" value="true" />
</feature>
<author email="dev@cordova.apache.org" href="http://cordova.io">
    Apache Cordova Team
</author>
<content src="index1.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-navigation href="*"/>
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
    <allow-intent href="market:*" />
</platform>
<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
</platform>
<engine name="ios" spec="^4.5.4" />

index1.html：

<html>
<head>
    <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
            <meta name="page_hybrid">
                <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
                    <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data:">
                    <link rel="stylesheet" type="text/css" href="index.css">
                        <title>Hello World</title>
                        </head>
<body>
    <div class="app">
        <h1>Cordova</h1>
        <form>
            <input type="text" name="txt1" id="txt1">
                <input type="text" name="txt2" value="this is a text" id=txt2>
                    <br><br>Gender Blender:
                    <br><br><input id="male" type="radio" name="gender" value="male" checked> Male
                        <br><br><input id="female" type="radio" name="gender" value="female"> Female
                            <br><br><input id="other" type="radio" name="gender" value="other"> Other
                                <br><br>checkbox: <input id="checkbox" type="checkbox" name="vehicle1" value="Bike">I have a bike<br>
                                    <br><br>button: <input id="button1" type="button" onclick="alert('Hello World!')" value="Click Me!">
                                        <br><br>date: <input id="dateBday" type="date" name="bday">
                                            <br><br>email: <input id="email" type="email" name="email">
                                                <br><br>number: <input id="number1" type="number" name="quantity" min="1" max="5">
                                                    <br><br>button: <input id="button2" type="button" onclick="window.location = 'test.html';" value="navigate">
                                                        <br><br>password: <input id="password1" type="password" name="pwd">
                                                            </form>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="slave.js"></script>
</body>

有人知道这个问题吗？

提前致谢。

【问题讨论】：

我被同样的问题困扰了一个月了

标签： javascript ios cordova wkwebview

【解决方案1】：

当您加载本地 HTML 文件时，null 来源似乎是 WKWebView 中的一个已知问题。当我尝试将 DUO Web SDK 集成到 Web 视图中时，我也面临着同样的障碍。这是我的案例的有效解决方案：

在本地（在您的 iOS 应用程序内）设置 Web 服务器。我正在使用swifter，它只需要几行代码来提供静态文件。仅供参考：

do {
    let html = try String(contentsOf: yourFileUrlObject, encoding: .utf8)
    server["/hello"] = { _ in .ok(.htmlBody(html)) }
    try server.start()
} catch let error {
    print("unable to start server " + error.localizedDescription)
}

由于默认情况下WKWebView 不允许 HTTP 访问，您应该将localhost 域列入您的Info.plist 的白名单。像这样创建层次结构：NSAppTransportSecurity > NSExceptionDomains > localhost > NSExceptionAllowsInsecureHTTPLoads，将属性类型设置为Boolean，值为YES。
从 web 视图访问本地 web 服务器，它应该可以工作。例如：

if let url = URL(string: "http://localhost:8080/hello") {
    let request = URLRequest(url: url)
    webView.load(request)
}

希望我的回答有帮助。

【讨论】：