网页踩坑记录，为你解析常见问题

Webview踩坑记录

Webview是一个将网页嵌入到移动应用中的组件，允许用户在应用中浏览网页。Webview的使用非常广泛，许多移动应用都会用到它，比如新闻应用、社交媒体应用、游戏应用等。

在Webview的开发过程中，我遇到了一些坑，现在分享给大家，希望能够帮助大家避免这些问题。

1. Webview在Safari 11中显示为未旋转

这个问题是在iOS 11中遇到的，在Safari 11中，Webview中的内容不会随着设备旋转而旋转。这是因为Safari 11对Webview的默认设置是fixed，这意味着Webview的内容不会随着设备旋转而旋转。

要解决这个问题，需要在Webview的父元素上设置flex:1，并在子元素上设置height:100%。这样，Webview的内容就会随着设备旋转而旋转。

2. 父元素flex:1，子元素设置height:100%无效

这个问题是在Android中遇到的，在Android中，如果Webview的父元素设置了flex:1，而子元素设置了height:100%，那么子元素的高度不会被拉伸。

要解决这个问题，需要在Webview的父元素上设置display:flex;flex-direction:column;，然后在子元素上再设置一遍flex:1。这样，子元素的高度就会被拉伸。

3. 需要在键盘收起的blur事件中，使用window.scrollTo(0, 0)来恢复页面滚动位置

这个问题是在iOS和Android中都会遇到的，当键盘弹出时，Webview的内容会被键盘遮挡，当键盘收起时，Webview的内容不会自动恢复到原来的位置。

要解决这个问题，需要在键盘收起的blur事件中，使用window.scrollTo(0, 0)来恢复页面滚动位置。这样，Webview的内容就会恢复到原来的位置。

4. Webview中无法使用JavaScript打开新窗口

这个问题是在iOS和Android中都会遇到的，在Webview中，如果使用JavaScript打开新窗口，那么新窗口不会被打开。

要解决这个问题，需要在Webview中设置allowFileAccessFromFilesAllowedForURLs和allowUniversalAccessFromFileURLs属性。这样，Webview就可以使用JavaScript打开新窗口了。

5. Webview中无法加载本地文件

这个问题是在iOS和Android中都会遇到的，在Webview中，如果尝试加载本地文件，那么文件不会被加载。

要解决这个问题，需要在Webview中设置allowFileAccessFromFileURLs属性。这样，Webview就可以加载本地文件了。