在App的WebView组件中嵌入h5页面时,总会红屏。查阅github上的issue后,发现只有规避这个报错信息能避免程序崩溃。
1 报错信息如下:
2 解决方案:在html页面中注入如下javascript代码可避免崩溃。
const
patchPostMessageFunction = ()
=> {
const
originalPostMessage =
window.
postMessage;
const
patchedPostMessage = (
message,
targetOrigin,
transfer)
=> {
originalPostMessage(
message,
targetOrigin,
transfer);
};
patchedPostMessage.
toString = ()
=>
String(
Object.
hasOwnProperty).
replace(
'hasOwnProperty',
'postMessage');
window.
postMessage =
patchedPostMessage;
};
const
patchPostMessageJsCode =
`(
${
String(
patchPostMessageFunction)
}
)();`;
render() {
return (
<
WebView
bounces=
{false}
onNavigationStateChange=
{(
navState)
=>
this.
onNavigationStateChange(
navState)
}
automaticallyAdjustContentInsets=
{false}
scalesPageToFit=
{false}
injectedJavaScript=
{
patchPostMessageJsCode
}//注入js代码
onMessage=
{(
data)
=>
this.
onChangeData(
data.
nativeEvent.
data)
}//接受并处理html页面传过来的数据
source
=
{
{
uri:
url
}
/>
);
}
注意:js代码注入的位置。当注入多个js代码时,上述js代码块前面已经有window.postmessage方法的调用,document.createEvent()。具体为什么目前还不清楚。
上述js代码块,即
var originalPostMessage = window.postMessage;
var patchedPostMessage = (message, targetOrigin, transfer) => {
originalPostMessage(message, targetOrigin, transfer);
};
patchedPostMessage.toString = () => String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
window.postMessage = patchedPostMessage;
//上述---避免崩溃的js代码
var evt = document.createEvent("HTMLEvents");
evt.initEvent("Name", false, false);
document.dispatchEvent(evt);