SecurityError（DOM 异常 18）：阻止尝试在 Angular 5 中使用 history.replaceState()...答案

【问题标题】：SecurityError (DOM Exception 18): Blocked attempt to use history.replaceState()... in Angular 5SecurityError（DOM 异常 18）：阻止尝试在 Angular 5 中使用 history.replaceState()...
【发布时间】：2018-02-03 00:18:55
【问题描述】：

问题

我收到以下错误：

[错误] 错误 – 错误：未捕获（承诺中）：SecurityError（DOM 异常 18）：阻止尝试使用 history.replaceState() 更改来自 file:///Users//Library/Developer/ 的会话历史记录 URL CoreSimulator/Devices//data/Containers/Bundle/Application//ios-shell.app/public/index.html 到 file:///Users//Library/Developer/CoreSimulator/Devices//data/Containers/Bundle/Application //ios-shell.app/public/#/。沙盒文档的路径和片段必须匹配。

两个url的区别只是结尾public/index.html -> public/#/

有一个similar question asked here on StackOverflow 但这是file:/// 和file:// 之间的问题

实施

这是一个自定义 iOS 应用程序，用于在没有 cordova 的情况下运行 HTML SPA 应用程序。目前在 iOS 11.2 的 iPhone 8 设备上使用 WKWebView 运行模拟器

Web 应用程序是使用{hash: true} 作为路由策略的 Angular 5 应用程序。

视图控制器

class ViewController: UIViewController {
    var serenity: Serenity?

    override func viewDidLoad() {
        super.viewDidLoad()
        serenity = Serenity(self)
        serenity?.load("index")
    }

    ...
}

Serenity.swift

class Serenity: WKWebView, WKScriptMessageHandler{

    var controller: ViewController?
    let config = WKWebViewConfiguration()
    var commands = Dictionary<String, (_ args: Any?) -> Any?>()

    init(_ controller: ViewController){
        self.controller = controller
        config.userContentController.addUserScript(WKUserScript(source: "window.NATIVE_DEVICE=true;", injectionTime: WKUserScriptInjectionTime.atDocumentStart, forMainFrameOnly: false))
        super.init(frame: controller.view.frame, configuration: config)
    }

    func load(_ file: String) {
        if let html = Bundle.main.path(forResource: file, ofType: "html", inDirectory: "public"){
            let url = URL(fileURLWithPath: html)
            let request = URLRequest(url: url)
            super.load(request)
            controller?.view.addSubview(self)
        }
    }

    ...
}

问题

有没有办法将index.html 文件加载为public/，以便在 Angular 接管并开始路由时不会导致此错误？

任何其他建议也会有所帮助

【问题讨论】：

标签： ios swift

【解决方案1】：

解决方案

我修改了我的 index.html 文件，使其具有 <base href="index.html"> 而不是 <base href="."> 的基数，这迫使 angular 使用像 .../index.html/#/ 这样的路由而不是 .../#/。

非解决方案（供未来的搜索者使用）

我尝试加载目录并默认允许WKWebView加载index.html页面

if let html = Bundle.main.path(forResource: file, ofType: "html", inDirectory: "public"){
    let url = URL(fileURLWithPath: html)
    let request = URLRequest(url: url).deletingLastPathComponent()
    super.load(request)
    controller?.view.addSubview(self)
}

但是这导致WKWebView 根本没有加载页面。

【讨论】：