首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

对于本地index.html文件,WKWebView会重新加载,然后变为空白

的原因是因为WKWebView在加载本地文件时,会将其视为跨域请求。由于安全策略的限制,跨域请求会导致浏览器阻止加载内容,从而导致页面变为空白。

为了解决这个问题,可以采取以下几种方法:

  1. 使用本地服务器:将index.html文件部署到本地服务器上,然后通过localhost或127.0.0.1访问。这样可以避免跨域请求,WKWebView就能正常加载页面内容。推荐使用腾讯云的云服务器CVM,详情请参考:腾讯云云服务器
  2. 设置WKWebView的安全策略:通过设置WKWebView的安全策略,允许加载本地文件。具体做法是在WKWebView的配置中设置allowFileAccessFromFileURLs为true。示例代码如下:
代码语言:txt
复制
let config = WKWebViewConfiguration()
config.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
let webView = WKWebView(frame: CGRect.zero, configuration: config)
  1. 使用其他方式加载本地文件:可以通过其他方式加载本地文件,例如使用UIWebView或者通过JavaScript代码动态加载文件内容。不过需要注意的是,UIWebView在iOS 12及以上版本已被废弃,推荐使用WKWebView。

总结起来,对于本地index.html文件,WKWebView会重新加载后变为空白的问题可以通过使用本地服务器、设置WKWebView的安全策略或者使用其他方式加载文件来解决。具体选择哪种方法取决于具体的需求和场景。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

分享超详细 WKWebView 开发和使用经验

WKUIDelegate WKWebView 网页的UI交互代理,对于 JS 中的 UI 类型操作需要实现对应的方法,例如 window.alert、window.confirm 等操作。...readAccessURL 参数:允许访问的资源路径,如果是在 Bundle 中加载本地 HTML,则需要设置该 HTML 所在的 Bundle 路径,路径设置好后,该目录在 WKWebView 中被视为沙盒目录...通过 [WKWebView loadRequest:] 方法访问 index.html 的话,仅能访问当前页面所在目录下的相对路径资源,无法访问目录外的资源,例如上例中,index.html 仅能访问...通过 [WKWebView loadData:] 和 [WKWebView loadHTMLString:] 方法仅能加载当前HTML内容,无法加载资源文件,这种加载模式下,由于不需要访问其他路径下的资源...// oc 代码 [WKWebView loadRequest:] // 发生失败会走该回调 // js代码 location.href="http://abcd" // 发生失败会走该回调 当容器开始加载数据

4.9K30
  • ​# iOS WKWebView适配(基础篇)

    "]; 4.WKUIDelegate wkwebview.UIDelegate属性 用户js中调用alert,confirm,prompt,如果不适配则无法使用对应js功能,估计是安全问题,因为使用中有的会采用这个作为...包,就是将bundle包路径拼接好,然后请求沙盒方式读取页面 自定义了一个url头部"bundle://",在请求的时候做"file:///"头部替换 4.加载源代码 直接把html文件读出来以后,以页面内容方式去读取...[self.wkWebView loadHTMLString:htmlString baseURL:nil]; 5.离线资源包的一点思考 利用离线加载这一特性,我们可以通过服务端资源打包成本地资源包(...zip包),通过服务器比对方式下载资源包,解压后放在本地指定的沙盒目录,随后通过wkwebview加载本地方式打开页面。...对于资源包要求 前后端分离(目前前端基本如此) 资源包加载需要相对路径,大部分在线资源都是通过cdn的,如何通过cdn去转换成资源包并打包进来,也是一个挑战,或者直接用cdn包也是可以的 要考虑降级策略

    3.9K30

    Hybrid App 应用 开发中 9 个必备知识点复习(WebView 调试 等)

    库加载并使用, UIWebView 中限制了; WKWebView 目前缺少关于页码相关的 API; WKWebView 提供加载网页进度的属性; WKWebView 使用 Safari 相同的 JavaScript...参考文章:《WKWebView 那些坑》 1. WKWebView 白屏问题 WKWebView 实际上是个多进程组件,这也是它加载速度更快,内存暂用更低的原因。...在 UIWebView 上当内存占用太大的时候,App Process 会 crash;而在 WKWebView 上当总体的内存占用比较大的时候,WebContent Process 会 crash,从而出现白屏现象...这是因为在加载 flash 的时候,系统会首先把你的 WebView 作为父控件,然后在该控件上绘制 flash ,他想找一个 Activity 的 Context 来绘制他,但是你传入的是 ApplicationContext...Charles 的主要作用有: 可以代理请求,用来查看页面发送的请求和接收的响应; 可以修改请求的响应,用来模拟自己想要的数据; 可以模拟网络请求的速度; 可以代理服务器的静态资源请求,指向本地文件

    3.2K00

    WKWebView

    6,WKWebView是多进程组件,这意味着会从APP内存中分离内存到单独的进程中。...以上介绍了WKWebView的优点,但是其也有以下缺点: 1,WKWebView需要iOS9及更高的版本,虽然WKWebView是在iOS8之后引入的,但是iOS8的版本存在重大限制,比如无法访问本地存储的文件...重新加载当前页面。 - reloadFromOrigin。重新加载当前页面,如果可能,使用缓存验证条件执行端到端重新验证。 - stopLoading。停止加载当前页面所有资源。...重新加载当前页面。 - reloadFromOrigin。重新加载当前页面,如果可能,使用缓存验证条件执行端到端重新验证。 - stopLoading。停止加载当前页面所有资源。...WKWebView,然后自动重新加载页面。

    6K20

    Hybrid App 应用开发中 9 个必备知识点复习

    WKWebView 白屏问题 WKWebView 实际上是个多进程组件,这也是它加载速度更快,内存暂用更低的原因。...在 UIWebView 上当内存占用太大的时候,App Process 会 crash;而在 WKWebView 上当总体的内存占用比较大的时候,WebContent Process 会 crash,从而出现白屏现象...WKWebView loadRequest 问题 在 WKWebView 上通过 loadRequest 发起的 post 请求 body 数据会丢失,同样是由于进程间通信性能问题, HTTPBody...这是因为在加载 flash 的时候,系统会首先把你的 WebView 作为父控件,然后在该控件上绘制 flash ,他想找一个 Activity 的 Context 来绘制他,但是你传入的是 ApplicationContext...或 Charles 的主要作用有: 可以代理请求,用来查看页面发送的请求和接收的响应; 可以修改请求的响应,用来模拟自己想要的数据; 可以模拟网络请求的速度; 可以代理服务器的静态资源请求,指向本地文件

    2.7K20

    【Hybrid】288- Hybrid App 应用开发中 9 个必备知识点复习

    WKWebView 白屏问题 WKWebView 实际上是个多进程组件,这也是它加载速度更快,内存暂用更低的原因。...在 UIWebView 上当内存占用太大的时候,App Process 会 crash;而在 WKWebView 上当总体的内存占用比较大的时候,WebContent Process 会 crash,从而出现白屏现象...WKWebView loadRequest 问题 在 WKWebView 上通过 loadRequest 发起的 post 请求 body 数据会丢失,同样是由于进程间通信性能问题, HTTPBody...这是因为在加载 flash 的时候,系统会首先把你的 WebView 作为父控件,然后在该控件上绘制 flash ,他想找一个 Activity 的 Context 来绘制他,但是你传入的是 ApplicationContext...Fiddler 或 Charles 的主要作用有: 可以代理请求,用来查看页面发送的请求和接收的响应; 可以修改请求的响应,用来模拟自己想要的数据; 可以模拟网络请求的速度; 可以代理服务器的静态资源请求,指向本地文件

    2.3K20

    Hybrid App 应用开发中 9 个必备知识点复习

    WKWebView 白屏问题 WKWebView 实际上是个多进程组件,这也是它加载速度更快,内存暂用更低的原因。...在 UIWebView 上当内存占用太大的时候,App Process 会 crash;而在 WKWebView 上当总体的内存占用比较大的时候,WebContent Process 会 crash,从而出现白屏现象...WKWebView loadRequest 问题 在 WKWebView 上通过 loadRequest 发起的 post 请求 body 数据会丢失,同样是由于进程间通信性能问题, HTTPBody...这是因为在加载 flash 的时候,系统会首先把你的 WebView 作为父控件,然后在该控件上绘制 flash ,他想找一个 Activity 的 Context 来绘制他,但是你传入的是 ApplicationContext...Fiddler 或 Charles 的主要作用有: 可以代理请求,用来查看页面发送的请求和接收的响应; 可以修改请求的响应,用来模拟自己想要的数据; 可以模拟网络请求的速度; 可以代理服务器的静态资源请求,指向本地文件

    2.3K30

    H5秒开技术选型

    起本地服务器加载本地资源5.sonic技术方案:6.支付宝方案:7.爱奇艺方案:8.今日头条方案:1....通过获取沙盒H5路径直接加载描述:通过获取沙盒H5路径直接加载 将h5文件存入沙盒,webview加载本地文件URL 。...拦截对css、js、img等资源加载的请求。优点:UIWebView原生支持缺点:WKWebView网络请求独立于主进程,NSURLProtocol无法拦截。...起本地服务器加载本地资源描述:如果本地有资源可以满足该请求的话,H5 容器会使用本地资源。 如果没有可以满足请求的本地资源,H5 容器会使用线上资源。...8.今日头条方案:内置文章详情页所需的css、js等文件,并可以控制版本,预创建WebView预创建预加载包含文章详情页所需的css、js的空html在列表页预加载文章详情所需的内容使用LRU内存缓存并保存到本地数据库在文章详情页获取预创建的

    1.2K40

    WKWebView 白屏问题

    1、WKWebView 自诩拥有更快的加载速度,更低的内存占用,但实际上 WKWebView 是一个多进程组件,Network Loading 以及 UI Rendering 在其它进程中执行。...初次适配 WKWebView 的时候,我们也惊讶于打开 WKWebView 后,App 进程内存消耗反而大幅下降,但是仔细观察会发现,Other Process 的内存占用会增加。...在 UIWebView 上当内存占用太大的时候,App Process 会 crash;而在 WKWebView 上当总体的内存占用比较大的时候,WebContent Process 会 crash,从而出现白屏现象...在 WKWebView 中加载下面的测试链接可以稳定重现白屏现象: http://people.mozilla.org/~rnewman/fennec/mem.html 这个时候 WKWebView.URL...会变为 nil, 简单的 reload 刷新操作已经失效,对于一些长驻的H5页面影响比较大。

    4.5K20

    iOS 下利用简单代码实现 JS 双引擎功能思路

    一、实现效果展示 首先利用 Safari 浏览器的 “开发” 功能,显示出当前应用加载的 WebView 这里效果图可以看到,控制台先打印了 开始异步执行 loadAction 任务,然后就直接执行了...二、思路概括 步骤一、 WKWebView 加载本地的一个 H5 页面,然后,在按钮的点击事件里将需要做的耗时事情告诉 iOS 原生 步骤二、iOS 原生收到消息后,创建一个原生下的 JSContext...步骤三、JSContext 对象加载本地写好的 JS 文件,然后通过步骤一传进来的参数直接异步调用 JS 文件下对应的 function。...2、创建有简单耗时任务 JS 文件 main.js 这个 JS 文件就是 JSContext (原生内可提供 JS 虚拟环境的对象)对象要加载 JS 文件,用它来模拟一些耗时的任务。...WKWebView 代理方法 对比一下 H5 文件下的 loadAction 方法, 1、对应 WKWebView 代理方法里的 name 标识 2、对应 WKWebView 代理方法里的 body

    2.6K00

    WKWebView 加载 Uni-App 导出的本地 H5

    Uni-App 打包发布的H5包直接放到APP中加载可以用于提升加载速度,一般有两种方式: 直接把包放到 iOS 项目中加载 (多用于开发阶段测试) 从后台服务器预下载到文件沙盒内加载 (可以减少APP...包以引用(蓝色文件夹)的方式加入项目 引入Uni-App 加载 uni-app - (void)viewDidLoad { [super viewDidLoad...Uni-App 基本逻辑和加载本地一致,但是必须使用 relativeToUrl 方法加载,首先确认自己缓存的目录,然后给路径拼接file://协议头: - (void)viewDidLoad {...Uni-APP 效果 Tips: 打包出来的H5先用电脑试下能否成功加载 index.html ~ 如果是Origin null is not allowed by Access-Control-Allow-Origin....问题导致无法加载可以按如下设置,使WKWebView允许跨域: [self.webView.configuration.preferences setValue:@YES forKey:@"allowFileAccessFromFileURLs

    1K30
    领券