: '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
实现思路： 抓取一个电影网站中的所有电影的思路如下： 根据一个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=\"(.+?)...文章就给看官们分享到这儿 最后，如果觉得有帮助，记得关注、转发、收藏哟
目标 当前页面需要与当前浏览器已打开的的某个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 解释下。 /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元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
