安卓Webview 加载网页 Uncaught TypeError: Cannot read property 'getItem' of null",

最新推荐文章于 2024-07-17 13:18:20 发布
原创 最新推荐文章于 2024-07-17 13:18:20 发布 · 7.8k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webview #javascript #android #前端

本文介绍了在使用WebView加载网页时遇到“Uncaught TypeError: Cannot read property ‘getItem’ of null”的问题及其解决办法。问题源于前端JS代码在页面未完全加载时尝试访问页面元素。解决方案包括调整JS文件的引入位置或将`setDomStorageEnabled`设置为true。

在使用webview加载一个网页的时候出现Uncaught TypeError: Cannot read property ‘getItem’ of null”,resource：“http://xxx”,意思是访问xxx网页的时候找不到某元素。

查了一下是因为该网页的js写得不规范(擦，原来是前端哥们挖的坑)：
在JS运行的时候你的页面还没有加载完成，所以你的JS代码找不到你的页面元素，就会抛出这个问题

  • 在网页端修改方法：把JS的引入文件，放在文档后面！就可以避免了。
  • 当然，在我们安卓端修改也只是一句话的事： webView.getSettings().setDomStorageEnabled(true);
  • 就可以忽略这个问题执行后面的方法
  • This seems to allow the browser to store a DOM model of the page elements, so that Javascript can perform operations on it.
  • 此处就允许浏览器保存doom原型，这样js就可以调用这个方法了
Android Webview: “Uncaught TypeError: Cannot read property 'getItem' of null”
LXFX1108的专栏
08-23 4422
Android Webview: “Uncaught TypeError: Cannot read property 'getItem' of null” 加上这句：   WebSettings settings = webView.getSettings(); settings.setDomStorageEnabled(true);
解决TypeError: Cannot read properties of null (reading ‘xxx‘)的错误
热门推荐
念兮为美
03-14 8万+
解决TypeError: Cannot read properties of null (reading ‘xxx‘)的错误.
Android webview解决JS报错chromium: [INFO:CONSOLE(1)] "Uncaught TypeError: Cannot read property 'getItem'
Flutter|Android移动开发
07-04 2万+
Android webview解决JS报错chromium: [INFO:CONSOLE(1)] “Uncaught TypeError: Cannot read property ‘getItem’ of null”这两天做了一个全是H5网页的，加个壳的APP，突然遇到一个JS报错问题， 一直报错，网页加载不出来，报错信息如下：chromium: [INFO:CONSOLE(1)] "Uncau
Android webview vue网页 Uncaught TypeError: Cannot read property ‘getItem‘ of null
心花怒放开到荼蘼
12-22 3147
1.问题 在Android 的 webview 中 显示 vue 网页后，发现有个网址传参并没有实现正确的逻辑操作，在页面上显示的结果不一样。 测试网页传参，传参读取正确。测试逻辑运算及其赋值，正确。 发现问题：在网页打印反馈中发现报错：Uncaught TypeError: Cannot read property ‘getItem’ of null 2.原因 getItem是网页上调用localStorage或者sessionStorage在浏览器中读取储存数据时调用的方法。 现在该方法读取的为空，按网
Uncaught TypeError: Cannot read property ‘getItem‘ of null“, source:
华灯雨
07-07 2900
WebSettings settings = mWebView.getSettings(); settings.setDomStorageEnabled(true);//开启DOM
解决WebView通过URL加载H5界面出现空白的问题
08-19
解决WebView通过URL加载H5界面出现空白的问题需要注意权限问题、基本配置问题、Uncaught TypeError: Cannot call method 'getItem' of null异常和调用getDeviceID方法时JS没有加载完毕导致出现空白的问题。
[error] [Window] Uncaught TypeError: Failed to fetch dynamically imported module: vscode-file://vscode-app/usr/share/code/resources/app/out/vs/workbench/contrib/output/common/outputLinkComputerMain.js#OutputLinkDetectionWorker
最新发布
08-13
当你在 VSCode 扩展开发中遇到 `Uncaught TypeError: Failed to fetch dynamically imported module outputLinkComputerMain.js` 错误时，这通常是由于模块加载路径或版本控制问题导致的。以下是系统化的解决方案： ...
Uncaught SyntaxError: Unexpected token '.' (at widgets.css:2:1)
08-23
另外，引用中提到的Android webview解决JS报错chromium: [INFO:CONSOLE(1)] “Uncaught TypeError: Cannot read property ‘getItem’ of null”也提供了一些关于JS<span class="em">1</span><span class="em">2...
Android开发 - HTTP网络技术
RBK的博客
03-02 2284
按照顺序本来应该看多媒体的，但是代码实在有点麻烦，算了吧，大不了当成demo就好了。比较有用的好像就是通知栏的通知功能。 看看网络技术，使用HTTP协议和服务器进行交互，并且解析返回的数据。 WebView 可以通过这个控件在应用程序内嵌一个浏览器浏览网址。 布局文件中添加一个WebView <WebView android:layout_width="match_paren...
[转] Android Webview: “Uncaught TypeError: Cannot read property 'getItem' of null
Leo's Blog
08-14 964
原文地址：[url]https://stackoverflow.com/a/33080057[/url] 解决方案： [code="java"]WebSettings settings = webView.getSettings(); settings.setDomStorageEnabled(true);[/code]
RN开发搬砖经验之—“Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘setItem“的问题分析
技术的学习与积累是个技术活
07-17 753
Android webview 加载页面时DOM storage API权限记得要打开
Android webview js 调用java方法报错"Uncaught TypeError: Object [object Object] has no method xx...
weixin_30830327的博客
07-19 322
webview开发，在Android4.4下js调用java方法报错"UncaughtTypeError:Object[objectObject]hasnomethod，同样的写法在4.3及下都没问题，4.4怎么不行; 在你的方法前面加上 @JavascriptInterface；因为4.4安全性要求更高了； 例：Uncaught T...
Vue第 41 篇，Vue项目报错，Uncaught TypeError: Cannot read properties of null (reading ‘getAttribute‘)
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
03-21 1万+
⭐Vue项目报错，Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')，翻译：无法读取null属性(读取'getAttribute')，解析：getAttribute()是js获取属性方法，就是getAttribute不能读取null的属性，这种错误一般出现在使用Echarts和地图后，当切换到空白页面后，重置页面时，就回报类似错误，解决方法就是在报错之前做判断处理。
WebView addJavascriptInterface
u013068229的专栏
01-07 1423
在android4.2以前，注入步骤如下： [java] view plaincopy webview.getSetting().setJavaScriptEnable(true);   class JsObject {       public String toString() { return "injectedObject"; }  
android webView 图片加载不出来 后台报错Uncaught TypeError: Cannot call method 'getElementsByTagName' of null
bufanni12的专栏
03-11 3458
在之前，webView加载图片完全没有问题。直到前端H5开发换新的加载图片的方式，导致图片忽然加载不出来了。 从后台日志看到了webview 打印了报错信息 Cannot call method 'getElementsByTagName' of null 我怀疑是不是由于此处报错终止了图片加载的进程。 分析此处错误出现的原因： 由于调用的H5界面的js其中的写法不规范，we
Android 6.0WebView加载前端网页白屏：Uncaught TypeError: Object.entries is not a function
苦逼的程序猿☺
11-24 1893
前言 前端写了一个页面，app在内部使用webview跳转打开，在6.0以上机子正常，但是在6.0一下打开白屏。 问题 在logcat中发现，打开页面时， 报错：Uncaught TypeError: Object.entries is not a function 所以定位到是页面js中的Object.entries貌似不认识啊，所以在MDN上查看了文档： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_O
Android webview解决报错 "Uncaught TypeError: Cannot read property 'getItem'
qq_19954537的博客
05-04 1867
Android webview 解决报错 "Uncaught TypeError: Cannot read property ‘getItem’ webView.getSettings().setDomStorageEnabled(true);
WebView显示网页出现Uncaught TypeError: Cannot call method 'getItem' of null异常
qq_27831055的博客
11-06 1289
WebView显示网页出现Uncaught TypeError: Cannot call method 'getItem' of null异常 09-21 16:17:49.161: I/chromium(18581): [INFO:CONSOLE(8)] "Uncaught TypeError: Cannot call metho...
Android WebView的使用 js、java代码调用出错chromium(5437)
qq0815224038的博客
08-13 1076
1.js调用Java代码时报错，log如下：I/chromium(5437): [INFO:CONSOLE(49)] "Uncaught TypeError: Object [object Object] has no method 'initST'", source: file:///android_asset/www/index.这个问题是因为use-sdk中配置android:targetSd
报错：js: Uncaught TypeError: Cannot read property 'checkRegistry' of undefined
07-03
在 Vue3 项目中使用 QWebChannel 调用 C++ 方法时，出现 `Uncaught TypeError: Cannot read property 'checkRegistry' of undefined` 错误通常表明 QWebChannel 实例未能正确初始化或注册。这种错误可能源于以下几种情况： 1. **QWebChannel 未正确初始化** 在 Vue3 的环境中，需要确保 QWebChannel 对象在页面加载后被正确创建，并且与 Qt WebEngine 或相关后端建立连接。如果 QWebChannel 实例未成功初始化，则调用其方法（如 `checkRegistry`）会导致该错误。 2. **跨域问题或异步加载延迟** 如果 QWebChannel 是通过远程资源加载的，可能会受到浏览器同源策略限制，或者由于异步加载尚未完成就尝试访问其属性而导致对象为 `undefined` [^3]。 3. **C++ 后端未正确暴露接口** 在 Qt 中，需要使用 `QWebChannelAbstractTransport` 和 `QWebChannel` 将 C++ 对象注册到前端 JavaScript 环境中。如果未正确设置传输通道或未将对象注册到 QWebChannel，则前端无法访问这些方法 [^5]。 4. **Vue3 生命周期钩子中过早访问 QWebChannel** 若在 `onMounted` 钩子之前或异步数据加载完成前尝试访问 `checkRegistry` 属性，也可能导致此错误。建议将所有对 QWebChannel 的操作放在 `onMounted` 生命周期钩子中执行 [^4]。 ### 解决方案 #### 检查 QWebChannel 初始化 确保在 Vue 组件的 `onMounted` 生命周期钩子中正确初始化 QWebChannel，并等待其连接建立后再进行调用： ```javascript import { onMounted } from 'vue'; onMounted(() => { const webChannel = new QWebChannel(qt.webChannelTransport, (channel) => { // 获取 C++ 对象 const cppObject = channel.objects.myCppObject; if (cppObject && typeof cppObject.checkRegistry === 'function') { cppObject.checkRegistry((result) => { console.log('Registry check result:', result); }); } else { console.error('checkRegistry method is not available'); } }); }); ``` #### 确保 C++ 对象已正确注册 在 Qt 端，确认你已正确地将 C++ 对象注册到 QWebChannel 并设置了传输机制： ```cpp // C++ 示例代码 QWebChannel *channel = new QWebChannel(webView->page()); MyCppObject *myObj = new MyCppObject(); channel->registerObject("myCppObject", myObj); webView->page()->setWebChannel(channel); ``` #### 异步处理和容错机制 引入异步检查机制以避免因 QWebChannel 尚未准备好而引发错误： ```javascript let retryCount = 0; const maxRetries = 5; function tryAccessCheckRegistry() { if (window.qwebChannel && window.qwebChannel.objects && window.qwebChannel.objects.myCppObject) { window.qwebChannel.objects.myCppObject.checkRegistry((result) => { console.log('Registry check result:', result); }); } else if (retryCount < maxRetries) { setTimeout(() => { retryCount++; tryAccessCheckRegistry(); }, 1000); // 每秒重试一次 } else { console.error('Failed to access checkRegistry after multiple attempts.'); } } onMounted(() => { tryAccessCheckRegistry(); }); ``` #### 调试与日志输出 添加调试信息可以帮助定位问题根源： ```javascript onMounted(() => { if (typeof QWebChannel === 'undefined') { console.error('QWebChannel is not defined. Check your Qt integration.'); } else { console.log('QWebChannel is available.'); } }); ``` ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值