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

错误: Angular8项目中的“Navigator”上不存在属性“”contacts“”和“”mozContacts“”

在Angular 8项目中遇到错误提示“Navigator”上不存在属性“contacts”和“mozContacts”,这通常是因为浏览器API的限制或者项目配置问题。

基础概念

Navigator对象是JavaScript中的一个全局对象,提供了关于浏览器的信息。然而,并非所有的浏览器都支持Navigator对象的所有属性。例如,contactsmozContacts属性并不是所有浏览器都支持的。

相关优势

现代浏览器API提供了丰富的功能,可以访问用户的联系人信息,但这需要用户的明确授权。如果浏览器支持这些API,开发者可以更方便地获取和处理用户的联系人信息。

类型

  • contacts:这是一个非标准的属性,旨在提供访问用户联系人列表的功能。
  • mozContacts:这是一个特定于Mozilla浏览器的属性,用于访问用户的联系人信息。

应用场景

这些API可以用于需要访问用户联系人信息的应用,例如社交应用、通讯录同步工具等。

问题原因

  1. 浏览器兼容性问题:大多数现代浏览器并不支持contactsmozContacts属性。
  2. 项目配置问题:可能在项目配置中没有正确处理浏览器兼容性问题。

解决方法

  1. 检查浏览器兼容性: 确保你使用的浏览器支持这些API。可以通过以下代码进行检查:
  2. 检查浏览器兼容性: 确保你使用的浏览器支持这些API。可以通过以下代码进行检查:
  3. 使用Polyfill: 如果需要在不支持这些API的浏览器上运行,可以考虑使用Polyfill来模拟这些API的功能。例如,可以使用web-contacts库:
  4. 使用Polyfill: 如果需要在不支持这些API的浏览器上运行,可以考虑使用Polyfill来模拟这些API的功能。例如,可以使用web-contacts库:
  5. 然后在代码中使用:
  6. 然后在代码中使用:
  7. 错误处理: 在代码中添加错误处理逻辑,以避免在不支持这些API的浏览器上运行时出现错误:
  8. 错误处理: 在代码中添加错误处理逻辑,以避免在不支持这些API的浏览器上运行时出现错误:

参考链接

通过以上方法,你可以解决Angular 8项目中遇到的“Navigator”上不存在属性“contacts”和“mozContacts”的问题。

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

相关·内容

Web开发未来会完全替代客户端开发吗?

但或许你仍然会认为相比可以系统底层直接交互原生客户端应用还是太弱了,我们可能会因为浏览器“缺失” 了某一能力而被迫选择开发一个客户端应用。...在 Fugu 项目中, Google 为 Chrome 规划了数百能力,如今进展已经过半,我们一起来看看浏览器现在拥有了哪些或许你还不知道能力吧 ......如果可以在 Web USB 进行交互,这意味着硬件制造商将能够为其设备构建跨平台 JavaScript SDK,这将极大简化一个 SDK 开发成本!...}; try { const contacts = await navigator.contacts.select(props, opts); handleResults(contacts);...内容网站可以自动识别图片文本,例如餐厅菜单。

2.6K10

获取系统联系人信息

内容提供是实质是个接口,后门,他给别人提供数据,系统联系人是个比较复杂内容通过者。...>节点,name属性authories属性,主机名部分是分号隔开contacts;com.android.contacts 低版本是前一个,高版本是后一个。...读取content://com.android.contacts/data 时出现错误,mimetype_id字段不存在,实际走视图表,当你不确定字段时候,调用Cursor对象getColumnNames...()方法,返回字段数组,打印一下 这里字段应该是data1mimetype 调用Cursor对象query()方法,注意写上条件,”raw_contact_id=?”...值new String[]{id} 世面上很多应用都是取出了联系人信息,社交应用一般都有发送信息给对方,读取系统联系人 需要定义权限:<uses-permission android:name="

86120
  • 使用Angular8百度地图api开发《旅游清单》

    UI使用 项目简介 《旅游清单》项目的背景主要是为了让笔者更好掌握angular8,因为之前做项目主要是使用vuereact,作为一名合格coder,必须博学而专一,也是因为笔者早年大学时期想要做一个想法...3.angular基本语法架构 1.基本语法 vue类似,ng基本语法如下: 模版语法 数据指令 属性绑定 事件绑定 案例如下: {{title}} <h2 [title]="mytitle...<em>上</em>现在完整项目基于<em>angular8</em><em>和</em>百度地图API开发旅游清单项目来学习。...未完善<em>的</em>部分:添加清单时,如果添了不符合规范<em>的</em>地址或者百度地图查不到<em>的</em>地址,因该出现<em>错误</em>提示,这块会在后期优化。...好啦,文章篇幅比较多,大致项目基本完成,如果想查看实际项目效果,请移步基于<em>angular8</em><em>和</em>百度地图API开发旅游清单项目。

    6K30

    Web性能优化之Worker线程(下)

    前天在Web性能优化之Worker线程()中针对Worker中专用工作线程Dedicated Worker做了简单介绍描述了如何配合webpack在项目中使用。...由于,在实际项目中,还未做实践,所以有些东西更偏向于概念API描述。但是,我感觉针对「服务工作线程」在项目优化方面还是有很大可探索空间。 那我们就闲话少叙,开车走起。...在「关联」服务工作线程「内部」抛出错误时触发 也可以使用 navigator.serviceWorker.addEventListener('error', handler)处理 onmessage:...该方法接收 URL 或 Request 对象「数组」 3. addAll()会对请求数组中「每一分别调用」add() 4....该接口暴露在「全局上下文」 self.clients 属性。 Client 对象支持以下属性方法。 id: 1.

    2.5K20

    设计一个应用集成路由:构建以API为中心敏捷集成系列-第五篇

    查看CamelJava EE JMX MBean状态 在本节中,您将查看各种CamelJava EE JMX MBean状态,使用JMX层JMX Navigator来发现构成Camel上下文...将显示JMX Server,MBeans JMX对象Camel JMX对象图标。 继续展开Camel JMX域树,直到出现cbr-route,然后选择cbr-route: ? ?...请按照以下步骤启用跟踪: 在JMX Navigator中,展开Camel JMX域MBean以显示cbr-example-context。...如果没有出现错误,请刷新cbr-example-context: 进一步测试追踪功能 在本节中,您将进一步测试跟踪功能,创建消息,并使用“消息属性”视图查看处理详细信息。...要设计路线,请完成以下任务: 创建Camel上下文 编辑计时器SetBody组件属性 将Bean标记Bean处理器添加到项目中 将日志处理器添加到项目中 创建Camel上下文 打开Fuse Integration

    3.5K20

    入门:构建简单Web API

    这个入门文章主要演示在ASP.NET MVC3网站宿主: 如何使用NuGet向项目中添加Web Api引用 如何创建一个通过HTTP GET访问Web Api 如何通过asp.net routes...设置站点端口号为9000 ? 2、向解决方案中加入Web Api引用 通过NuGet来添加Web api程序集引用,右击项目属性,选择“Manage NuGet Packages” ?...通过一个HTTP Get 方法暴露contacts:首先创建一个poco(Plain Old C#)Contract类,代表我们在api上传递联系人,本质就是一个DTO(数据传输对象),在HTTP我们把它作为资源...选择是基于响应可得表现形式(根据不同维度,响应会不同;例如,语言,内容编码,等等)请求消息里特定头域或关于请求其他信息(如:网络客户端地址)。...总结 通过这个Quick start,我们学习到了以下内容 如何使用NuGet向项目中添加Web Api引用 如何创建一个通过HTTP GET访问Web Api 如何通过asp.net routes

    3.1K90

    React Native 导航:示例教程

    React Navigation 是用 JavaScript 编写,并不直接使用 iOS Android 原生导航 API。相反,它重新创建了这些 API 某些子集。...React Native Navigation 有一点不同,它直接使用 iOS Android 原生导航 API,这使得它能够提供更加原生外观感觉。...我建议您始终使用该命令来安装依赖包,因为 npm yarn 将始终安装最新版本,而最新版本可能与您项目不兼容。缺点是可能会出现生产级别的错误。...React Native 堆栈导航器 React Navigation 使用 JavaScript 构建,让我们创建组件导航模式在外观感觉都与真正原生模式无异。...则利用了原生 API;iOS UINavigationController Android Fragment,这样导航行为就会与原生构建应用程序一样。

    35910

    React Native 系列(八) -- 导航

    tintColor : 导航栏按钮颜色设置。 titleTextColor : 导航栏字体颜色 。 translucent : 导航栏是否是半透明,true/false。...NavigatorIOS使用步骤 初始化路由 注意:component,需要传入组件,自定义组件 NavigatorIOS按钮图片,默认会被渲染成蓝色 NavigatorIOS按钮,只能放一张图片...title:标题,如果设置了这个导航栏标签栏title就会变成一样,不推荐使用 header:可以设置一些导航属性,如果隐藏顶部导航栏只要将这个属性设置为null headerTitle...Navigator Navigator作用:只提供跳转功能,支持 iOS android 注意:导航条需要自定义,需要导航条界面,自己添加 只要一个控件,包装成Navigator就能获取跳转功能...直接在项目中导入就行: import {Navigator} from 'react-native-deprecated-custom-components' Navigator 使用步骤 创建 Navigator

    6K80

    ASP.NET Core 6框架揭秘实例演示:跨域资源共享(CORS)N种用法

    同源策略是所有浏览器都必须遵循安全原则,它存在决定了浏览器在默认情况下无法对跨域请求资源做进一步处理。为了实现跨域资源共享,W3C制定了CORS规范。...我们将API定义在Api项目中,App是一个JavaScript应用程序,它会在浏览器环境下以跨域请求方式调用承载于Api应用中API。...如果按F12键查看开发工具,就会发现图29-2所示关于CORS错误,具体错误消息为“Access to XMLHttpRequest at 'http://www.qux.com:8080/contacts...由于Api应用对“http://www.foo.com:3721”“http://www.bar.com:3721”这两个域进行了显式授权,如果采用它们来访问App应用程序,浏览器就会呈现出图3所示联系人列表...[S2906]将CORS规则应用到路由终结点(代码编程形式) 除了在调用UseCors扩展方法时指定Cors策略外,我们还可以在注册终结点时候将Cors规则作为路由元数据应用到终结点

    37120

    在一个空ASP.NET Web项目创建一个ASP.NET Web API 2.0应用

    ·Common:这是一个空类库项目,仅仅定义了表示联系人数据类型而已。之所以将数据类型定义在独立目中,只要是考虑到它会被多个项目(WebApiConsoleApp)所使用。...GlobalConfiguration静态属性Configuration返回一个代表当前配置HttpConfiguration对象,全局路由表就注册在它Routes属性。...该扩展使应用程序可以直接将文件写到 Web Server ,同时支持文件加锁版本控制。...AddressModel六个字段分别绑定在六个HTML元素,其中province、city、districtstreet字段绑定到代表对应文本框Value属性(data-bind="value...由于这两个链接HTML内嵌于foreach绑定之中,所以当前绑定上下文实际contacts属性中某个联系人对象。“$root”前缀目的在于告诉KO绑定是ViewModel自身成员。

    4.6K110

    【小程序项目开发-- 京东商城】uni-app开发之轮播图

    branch 二、配置网络请求(挂载$http) 由于平台限制,小程序项目中不支持 axios,而且原生 wx.request() API 功能较为简单,不支持拦截器等全局定制功能。...因此,建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。...属性值判断是否 成功获取数据 methods: { async getSwiperList() { // '/' 根目录即为在main.js文件配置 baseUrl const...标签改为navigator标签 由于navigator 标签 是导航标签,是按照内部组件大小,分配页面的 这里将view组件转化为 navigator组件,并加上url属性跳转到商品页,对其传商品id...: 由于是动态传参,所以在配置url属性中前面要加上分号:(:是v-bind缩写,不然无法跳转页面。 效果: 页面也成功传参

    92830

    Xcode 12 使用技巧

    5 修复多个错误 程序出现多个错误时,可以选择 Editor —> Fix All Issues 修复多个错误。...9 代码提示宽度 当代码提示出现以后,如果某个方法特别长,可以选中提示面板边缘,并将其拖动到想要宽度。 10 快速添加断点 使用 Cmd+\ 在当前行添加或删除断点。...13 查看interface 按住 Ctrl+Cmd+↑,会生成当前文件 interface,显示当前文件属性、函数签名注释。如果存在该文件测试文件,可以再按一次就会跳转到测试文件。...21 粘贴代码格式化 有时候从别的地方粘贴代码到项目中时缩进不对,可以使用 Ctrl+I 进行格式化。 22 内购测试 可以在没有 App Store Connect 情况下测试应用内购买。...23 查看Build Settings含义 一般很难记住 Build Settings 作用,可以选择其中一使用 Quick Help 检查器查看大多数 Settings 文档,或者按住 Option

    1.7K20

    Vue 魔法师 —— 重构“布局”

    Vue 魔法师 —— layouts date: 2021-03-17 tags: vue categories: 2021 ---- 正视布局 开篇想先问你一个问题: “你认为你目前所在 Vue 项目中...这样做使我们代码更重并且迫使组件担负起渲染布局责任(组件布局没有拆分够开); 虽然这些其实也并不是一些什么大不了点,但是由于受到 **NuxtJS** 启发,所以咱们决定进行 **breaking...简而言之,即: **你可以定义【布局】为组件一个【属性】**,而不是设置一个个布局父组件到你应用中。...附:[nuxtjs-layouts](https://zh.nuxtjs.org/examples/layouts/) 让我们看看在我们 Vue 项目中如何实现这一启发?...,并且为之加入了名为 “layout” 计算属性

    75630
    领券