app软件开发 没有html 文件,开发Hybrid App时，file:///加载本地html，无法渲染内容的问题...

新上手一个混合开发APP的项目，需要IOS和android通过webview调用本地html文件，要求能显示H5页面并产生交互。

因为之前没接触过混合开发，项目在一开始就遇到了问题，ios和android在调用本地html文件时，可以引入资源，但js不能读写加载的内容。如路由导航功能渲染的页面无法显示，以及数据无法加载。

后面尝试把html文件放到服务器上，webview通过请求远程地址加载html文件，发现显示正常，内容和数据都能正常渲染。于是猜测是域名URL的问题，在百度上搜索“file:///加载html文件”时，发现一个关键词——“同源策略”。

1.1、先来说说什么是源

源(origin)就是协议、域名和端口号，若地址里面的协议、域名和端口号均相同则属于同源。

1.2.什么是同源策略？同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以http://a.com下的js脚本采用ajax读取http://b.com里面的文件数据是会报错的。

• 不受同源策略限制的：1、页面中的链接，重定向以及表单提交是不会受到同源策略限制的。2、跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的，，，等。

在明白什么是同源策略后，问题差不多已经找到原因了，继续在网上查找了一番，看到一篇文章——WebView的优化--处理WebView的容易忽略的漏洞，在这篇文章里面找到了安卓端的解决方法：

setAllowFileAccess()

// 设置是否允许 WebView 使用 File 协议

webView.getSettings().setAllowFileAccess(true);

// 默认设置为true，即允许在 File 域下执行任意 JavaScript 代码

1：禁用 file 协议；

webView.getSettings().setAllowFileAccess(false);

这样虽然最方便，但同时也限制了WebView 的功能，使其不能加载本地的 html 文件。

2：对于需要使用 file 协议的应用，禁止 file 协议加载 JavaScript。；

setAllowFileAccess(true);

// 禁止 file 协议加载 JavaScript

if (url.startsWith("file://") {

setJavaScriptEnabled(false);

} else {

setJavaScriptEnabled(true);

}

setAllowFileAccessFromFileURLs()

// 设置是否允许通过 file url 加载的 Js代码读取其他的本地文件

webView.getSettings().setAllowFileAccessFromFileURLs(true);

// 在Android 4.1前默认允许

// 在Android 4.1后默认禁止

这样不安全，解决办法直接关掉setAllowFileAccessFromFileURLs(false);

setAllowUniversalAccessFromFileURLs()

// 设置是否允许通过 file url 加载的 Javascript 可以访问其他的源(包括http、https等源)

webView.getSettings().setAllowUniversalAccessFromFileURLs(true);

// 在Android 4.1前默认允许(setAllowFileAccessFromFileURLs()不起作用)

// 在Android 4.1后默认禁止

这个一般还好，如果想保证资源的安全的话，建议关掉

setAllowUniversalAccessFromFileURLs(false);

setJavaScriptEnabled()

// 设置是否允许 WebView 使用 JavaScript(默认是不允许)

webView.getSettings().setJavaScriptEnabled(true);

// 但很多应用(包括移动浏览器)为了让 WebView 执行 http 协议中的 JavaScript，都会主动设置为true，不区别对待是非常危险的。