: 'Nuxt Modules', }, }])更加详细的配置可以参考官方文档:Schema.org添加 Google Analytics 统计代码 1、 安装 nuxt-gtag...: npx nuxi@latest module add gtag 2、 nuxt.config.ts 添加配置:export default defineNuxtConfig({ modules:...['nuxt-gtag'], gtag: { id: 'G-XXXXXXXXXX' } }) 3、 或者在环境变量中添加 NUXT_PUBLIC_GTAG_ID : NUXT_PUBLIC_GTAG_ID...useDirective: true, version: 2, domains: ['dream-site.cn'], ignoreLocalhost: true } }); 4、 跟踪事件...others}"> with event details 详细文档:nuxt-umami总结Nuxt3 集成了很多 SEO Modules,使开发者能够更加高效便捷地做好搜索引擎方面的优化
后来也通过查阅资料,也有下面的一种实现块元素拖拽的方法: //血小板拖动(landlord是块元素的ID) var oDiv=document.getElementById...drgObj.addEventListener("dragstart",dragstart,true); drgObj.addEventListener...("dragend",dragend,true); } 这种实现方式主要使用了dragstart和dragend事件实现,但是在绑定事件的时候需要做一下兼容。...php //首先你要有读写文件的权限,首次访问肯不显示,正常情况刷新即可 $online_log = "maplers.dat"; //保存人数的文件到根目录, $timeout = 30;//30秒内没动作者...WordPress后台的默认登录地址为:/wp-login.php 添加代码更改WordPress登录地址,将下面代码添加到functions.php文件里 //更改WordPress登录地址 add_action
场景:在实际开发中,遇到了这样一种场景,vue3页面,两个相同组件,在满足某条件下 v-if 展示第一个组件,满足另一个条件下, v-if 隐藏第一个组件,同时展示第二个组件,比如反馈组件,会通过 window.addEventListener...来监听自定义的反馈弹窗展示和隐藏事件。...结果:两个相同组件一个卸载,一个挂载,第一个组监听的反馈弹窗展示和隐藏事件都可以生效,后展示的组件事件监听都不生效........window.removeEventListener('feedbackShow') window.removeEventListener('feedbackHide') }) 分析: 通过打印日志,跟踪组件的挂载...了,所以导致后一个组件的事件监听不生效。
社会化分享按钮点击统计 我们可以使用 Google Analytics 的事件跟踪来跟踪社会化分享按钮的点击,Google 事件跟踪的函数是:_trackEvent(category, action,...1,建议设置为 1,便于后面的统计。...那么分享到新浪微博的按钮点击的事件跟踪的函数就是: _trackEvent('SocialShare', 'Share', 'Sina', 1); 如果使用 Google Analytics 最新异步跟踪代码的话...然后选择事件总计标签左边侧的下拉菜单,选择网页就能看到哪个页面被分享最多了: 社会化分享按钮最多点击页面统计报表 社会化分享的效果 上面通过 Google Analytics 的事件跟踪功能统计了社会化分享按钮的点击...utm_medium=Share&utm_campaign=Share&utm_source=Sina 分享到豆瓣,就给当前页面的 URL 新增如下参数: ?
因此,DOMContentLoaded 肯定在下面的这些脚本执行结束之后发生: document.addEventListener("DOMContentLoaded", () =...下面的这个示例正确显示了图片大小,因为 window.onload 会等待所有图片加载完毕: window.onload = function() { // 与此相同 window.addEventListener...如果我们要取消跳转到另一页面的操作,在这里做不到。但是我们可以使用另一个事件 —— onbeforeunload。...; readystatechange 事件是跟踪文档加载状态的另一种机制,它很早就存在了。...document.readyState 是文档的当前状态,可以在 readystatechange 事件中跟踪状态更改: loading —— 文档正在被加载。
一、API 简介 Page Visibility API 用来检测页面当前是否可见,以及打开网页的时间等 以前监听用户正在离开页面常用的方法是下面三个事件: 1、pagehide 2、beforeunload...API 都会监听到页面的可见性发生变化 这个 API 常用于页面被切换到其他后台进程时,自动暂停音乐或视频的播放,达到节省资源,减缓电能消耗等效果 二、document.visibilityState...哪怕只露出一个角,document.visibilityState 属性就返回 visible,只有以下四种情况,才会返回 hidden: 1、浏览器最小化 2、浏览器没有最小化,但是当前页面切换成了背景页...只要 document.visibilityState 属性发生变化,就会触发 visibilitychange 事件 因此,可以通过监听这个事件跟踪页面可见性的变化,举个例子: document.addEventListener...,可以监听可见性变化 下面是另一个例子,一旦页面不可见,就暂停视频播放: var vidElem = document.getElementById('video-demo'); document.addEventListener
浏览器没有最小化,但是当前页面切换成了背景页。 浏览器将要卸载(unload)页面。 操作系统触发锁屏屏幕。 可以看到,上面四种场景涵盖了页面可能被卸载的所有情况。...注意,document.visibilityState属性只针对顶层窗口,内嵌的页面的document.visibilityState属性由顶层窗口决定。...使用 CSS 属性隐藏页面(比如display: none;),并不会影响内嵌页面的可见性。...因此,可以通过监听这个事件(通过document.addEventListener()方法或document.onvisibilitychange属性),跟踪页面可见性的变化。...页面可见时,用户关闭 Tab 页或浏览器窗口。 页面可见时,用户在当前窗口前往另一个页面。 页面不可见时,用户或系统关闭浏览器窗口。 这三种情况,都会触发visibilitychange事件。
启发来自obaby的《WordPress cookie保存用户信息失败–战五渣抓虫记》一文,怎么能少得了我呢。当然了,你在下次评论时会自动填充信息表单,效率是不是很快?...监听输入框输入事件:通过addEventListener方法,将saveData函数绑定到name、email和weburl输入框的input事件上,当输入框中输入信息时自动保存数据。...页面加载时恢复数据:使用window.onload事件,在页面加载完成后检查本地存储中是否存在之前保存的数据,如果存在则将数据填充到相应的输入框中。...; } // 监听输入框输入事件,自动保存数据 nameInput.addEventListener("input", saveData); mailInput.addEventListener...()方法监听输入框的input事件,这样当输入框中输入内容时,会自动触发保存数据的操作。
)); }); }); 实例:我们在pc端常见的分页方法,因头部等大部分都是相同的,所以我们分页的时候基本采用ajax请求来完成产品的替换,作用是为了减少页面的加载...但是他会出现一个很严重的问题(由于页面没有重新加载,浏览器URL历史中在每次下一页后是不会新添加的URL,因为只是局部刷新,所以不会添加新的URL,这就导致了,浏览器的返回上一页功能不能使用),pushState... if (history.pushState) { window.addEventListener("popstate", function() {...window对象上的事件处理程序....pushState 5 4.0 (2.0) 10 11.50 5.0 history.state 18 4.0 (2.0) 10 11.50 6.0 参考: http://www.zhangxinxu.com/wordpress
index.js 文件里面核心是通过wx.request 接口访问上面的API URL 获取到文章数据并setData 供后续数据渲染: // https://devework.com/wordpress-rest-api-weixin-weapp.html...--文章数据的展示,细节代码略过--> 上面的WXML 代码中绑定了两个事件函数:一是下拉事件pullDownRefresh...(),一个是点击事件redictSingle(),即点击后跳转到文章详情页。...也是类似,通过wx.request 接口访问URL 然后渲染数据到WXML 页面上。代码与上面的类似就不重复了。 这里其实涉及到个如何将富文本转为微信小程序可识别的WXML 的问题。...分类页功能 实时同步网站分类信息,展示分类下面的文章数量以及信息,可以转发当前分类到微信好友/朋友圈。
Google Analytics 事件跟踪 但是上面的这份信息不够清晰,并且含有的数据不够多,比如不能查看所有页面的载入速度,不能查看哪个地区或者 IP 访问速度,其实我们可以使用 Google Analytics...的事件跟踪的功能来查看网站上每个页面的访问速度,以及每个 IP 的访问速度。...Google Analytics 事件跟踪是对独立于网页浏览的事件进行跟踪,用来记录不产生页面浏览的用户交互行为的。通常的网站跟踪模式,是基于页面浏览行为的。...在这种情况下,Google Analytics 无法追踪到后面的信息。...Analytics 事件跟踪功能统计页面加载时间 ----
因为 web 站点是使用web-view标签加载的,所以我们要让用户点击之后发送事件消息到浏览器线程去新开web-view标签页加载指定应用。...那么如何传递消息呢,我们注意到 electron 的web-view标是可以支持console-message事件的,所以可以基于这个 API 实现。 下面来介绍一下实现的过程。...首先我们新开应用页签时需要显示 tab 页的 title 标题,加载应用地址,结构如下所示: {""url":"http://oa-web.test.kai12.cn/oauth?...官方提供了如下示例代码: const webview = document.querySelector('webview'); webview.addEventListener('console-message...,可以参考下方代码: // 从标签组中获取当前激活页面的web-veiw对象并添加监听事件 let webview = tabGroup.getActiveTab().webview; webview.addEventListener
这篇文章主要介绍名片页的路由过渡是如何去做的 介绍 在19年,我就写了一个较为炫酷的个人名片页。...不过还是有挺多小巧思在里面的。...12月就开始写了,刚开始没做SSR,最近尝试迁移到了Nuxt,路由动效之类兼容也很折磨,不过这不是这篇文章的重点,就不多说啦~ 文章页是前几个星期才刚加上的,目前是把旧WordPress博客当CMS用,...但是有些太重了——给文章页加上了Redis swr缓存,才能勉强保证流畅访问。...,在 tranform 过渡完成之后,告知 transition 组件过渡已结束 let _event = null; el.addEventListener('transitionend
目标 当前页面需要与当前浏览器已打开的的某个tab页通信,完成某些交互。其中,与当前页面待通信的tab页可以是与当前页面同域(相同的协议、域名和端口),也可以是跨域的。...window对象,如果需要B页面对A页面的通信,只需要在B页面侦听message事件,获取事件中传递的source对象,该对象即为A页面window对象的引用: B页面 window.addEventListner...因此,通过事件可以完成高效的通信机制: A 页面 window.addEventListener("storage", function(ev){ if (ev.key == 'message...这种情况才是最急需解决的问题,如何实现两个没有任何关系的tab页面通信,这需要一些技巧,而且需要有同时修改这两个tab页面的权限,否则根本不可能实现这两个tab页的能力。...tab页面的连通。
上面的URL 即表示输出第1页最新5篇文章的数据(5篇为1页)。这个URL 接下来将要用到。 微信小程序 微信小程序就不多介绍了,虽然刚开始不温不火,但接下来必然是在国内互联网占据一定的地位。...开发篇 上一章节大致介绍了原理后,接下来就以本站开发的“DeveWork极客”小程序第一版v1.0 为例,介绍三个页面(首页、内容页、阅读记录页)大体上是如何做出来的。...--文章数据的展示,细节代码略过--> 上面的WXML 代码中绑定了两个事件函数:一是下拉事件pullDownRefresh...(),一个是点击事件redictSingle(),即点击后跳转到文章详情页。...也是类似,通过wx.request 接口访问URL 然后渲染数据到WXML 页面上。代码与上面的类似就不重复了。 这里其实涉及到个如何将富文本转为微信小程序可识别的WXML 的问题。
touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。touchend事件:当手指从屏幕上离开的时候触发。...touchcancel事件:当系统停止跟踪触摸的时候触发监听原生touchstart事件,记录其初始位置的值,并监听原生touchmove事件,记录并计算当前滑动的位置值与初始位置值的差值,大于0表示向下拉动...监听原生touchend事件,若此时元素滑动达到最大值,则触发callback,同时将translate重设为0,元素回到初始位置。 3页面加载的实现 h5代码如下: <!...('touch')[0]; //选择全部的类 touch.addEventListener('touchstart',function (e) {//侦听事件bai并处理相应的函数...Y = e.changedTouches[0].pageY;//触点坐标选取 // console.log(Y); }); touch.addEventListener
触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。...在这个事件发生期间,调用preventDefault()事件可以阻止滚动。 touchend事件:当手指从屏幕上离开的时候触发。 touchcancel事件:当系统停止跟踪触摸的时候触发。...关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。 上面的这些事件都会冒泡,也都可以取消。虽然这些触摸事件没有在DOM规范中定义,但是它们却是以兼容DOM的方式实现的。...除了常见的DOM属性,触摸事件还包含下面三个用于跟踪触摸的属性。 touches:表示当前跟踪的触摸操作的touch对象的数组。...function load (){ document.addEventListener('touchstart',touch, false); document.addEventListener
实现思路: 抓取一个电影网站中的所有电影的思路如下: 根据一个URL得到电影网站的所有分类 得到每个分类中的电影的页数 根据其电影分类的URL规律构造每个分类中每个页面的URL 分析每个页面中的html...url[0] maxpage = int(get_pages(str(url[1]).encode('utf-8'))) print maxpage 获取每个分类中有多少页电影的代码如下...tag_html = gethtml(tag_url) #div class="paginator soup = BeautifulSoup(tag_html) #过滤出标记页面的...六个法国游客决定参加理查德·达奇组织的到非洲的一... re_movie = r'<a class=\"mod_poster_130\" href=\"(.+?)...文章就给看官们分享到这儿 最后,如果觉得有帮助,记得关注、转发、收藏哟
现在,让我将上面的 URL 解释下。 /wp-json/wp/v2/ 是WordPress 定义的 REST API 路由(router)与版本号等的组合。...posts 在 WordPress 中,称为「终点」(endpoint)。 per_page 与 page 则是参数。 上面的 URL,表示输出第 1 页最新 5 篇文章的数据(5 篇为 1 页)。...上面的 WXML 代码中,绑定了两个事件函数:一是下拉事件 pullDownRefresh(),一个是点击跳转至文章页面的事件 redictSingle()。 ? 4....构建文章详情页 文章页使用到的 API 地址是 your-site.com/wp-json/wp/v2/posts/{id}。...类似地,通过 wx.request 接口访问 URL,然后渲染数据到 WXML 页面上。 代码与上面的类似,就不再重复。
领取专属 10元无门槛券
手把手带您无忧上云