WebView + Fragment 使用时遇到的坑

公司项目中使用 H5Fragment 作为展示 WebView 的通用组件。

之前使用方式

和淘宝类型，底部某个 Tab 中，展示的是 H5 的页面，其他都是原生的页面，使用正常。

image.png

新的使用方式

在一次需求变动后，需要底部两个 Tab 去展示两个 H5Fragment，本来以为一切都是照搬就行。但是马上发了一个奇怪的问题。

两个 H5Fragment 虽然对象不同，但是公用了一个 webView。举例说明就是：

• Tab1 加载的是 www.baidu.com，点击 Tab1 是正常显示的。
• Tab2 加载的是 www.qq.com，点击 Tab2 却没有正常显示，切回 Tab1 之后发现，Tab1居然从百度变成了qq的页面。

问题排查 & 解决方案

1. 项目使用 ARouter 加载的，排查后发现没问题，两个 H5Fragment 是不对的对象。
2. 项目使用 X5 内核，排查之后发现原生和 X5 没区别。
3. 一筹莫展的时候突然发现一个不起眼的关键点：

image.png

之前的布局通过 mActivity 来获取对象的，我们使用的是同一个 H5Fragment，布局的 ID 肯定是一样的，会不是这个问题导致的呢。

webView = mActivity?.findViewById(R.id.webView) as YHScrollWebView

修改之后：

webView = mRootView?.findViewById(R.id.webView) as YHScrollWebView

运行正常。

结论

在 Fragment 中调用 findViewById() 方法时，不要想当然的去用 activity.findViewById()。虽然这种代码在普通情况下不会带来影响，但是也同时是给未来的同事或自己挖坑。

最优解：

mRootView = inflater.inflate(layoutId, container, false)
mRootView?.findViewById(R.id.xxx)