首页
学习
活动
专区
圈层
工具
发布

WordPress 技巧:使用自定义字段给日志单独加载 JS 脚本

但是 WordPress 日志编辑框会对过滤这些 Javascript 脚本,所以我们无法直接把脚本写到日志,如果修改主题,把脚本添加到主题的 header.php 文件中,那么博客所有的页面都会加载这些脚本...所以这个时候我们可以通过 WordPress 自定义字段来给某篇的日志单独加载 Javascript 脚本和 CSS 样式表。...假设我们给日志单独加载 Javascript 脚本的自定义字段是 custom_head。...Javascript 脚本,使用的自定义字段是 custom_head。...> 然后在编辑日志的时候,在自定义字段区域,创建一个新的自定义字段,名字为:"custom_head",输入你要单独为这篇日志加载的 Javascript 代码或者 CSS 样式表即可。

1K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    异步加载脚本保持执行顺序

    首先是外部脚本和行内脚本,对于异步加载的脚本,会导致竞争状态,使得出现未定义的错。...以下几种方式解决该问题: 1.硬编码回调 将test方法的执行定义在外部脚本(即调用的脚本),该方法不灵活,如果调用的是第三方脚本的话,更加麻烦。此处不显示例子。...缺点:需要修改外部脚本,对第三方库不适用。 多个脚本按序执行: 正常引入脚本: 运行结果: ? ? 采用XHR eval: 运行结果: ? ? 由于脚本没有按顺序执行,出现未定义的错误。...}; xhrObj.open('GET', url, true); xhrObj.send(''); }, //遍历数组,当发现某一脚本加载但未执行时...for (var i = 0; i < len; i++) { var qScript = EFWS.Script.queuedScripts[i]; //已加载的脚本

    2.3K20

    2022 Web 年鉴 — JavaScript

    虽然这种增长没有前几年那么迅速了,但这仍然是一个令人担忧的趋势。虽然我们设备的功能和性能在不断改进,但并不是每个人都在用着最新的设备。...与中位数的移动端页面加载的总字节数相比,未使用的 JavaScript 占所有加载脚本的 35%。这比去年的 36% 略有下降,但仍然有很大一部分已加载但未使用。...https://babeljs.io/docs/en/assumptions 但 Babel 仍然由用户定义的配置驱动,并且只能在存在过时的配置文件的情况下支持。...虽然 jQuery 相对比较小且运行速度相当快,但它仍然带来了一部分额外的性能开销。...与去年相比,React 的使用率明显保持不变,为 8%,这可能表明由于 JavaScript 生态系统中的选择越来越多,它的采用率已趋于平稳。

    97920

    WordPress 通过模板文件和自带的函数引入 cssjs 的两种方法

    注意啦以下方法虽然放在了 functions.php 中,表面感觉好了点...... 脚本情况时使用。默认值:None $deps(数组)(可选)脚本所依靠的句柄组成的数组;加载该脚本前需要加载的其它脚本。若没有依赖关系,返回false。...is_admin ) { // 前台加载的脚本与样式表 // 去除已注册的 jquery 脚本 wp_deregister_script( 'jquery' ); // 注册 jquery 脚本 wp_register_script...'/js/jquery.js', false, '1.0', false ); // 提交加载 jquery 脚本 wp_enqueue_script( 'jquery' ); } } // 添加回调函数到...> 4、另外一个 4、另外一个函数:wp_print_scripts() 虽然将 JavaScript 文件都放到页面末尾加载对于页面加载速度很有帮助,但是请注意,所谓页面末尾指的是在 WordPress

    2.7K30

    XSS平台模块拓展 | 内附42个js脚本源码

    04.JQuery键盘记录键盘 一旦加载jQuery,一行(长)会写一个键盘记录器。像往常一样,捕获的密钥在制作的URL的查询字符串中发送。在许多情况下可能有用。...,当然也包括所有已安装的插件,它们的版本以及它们应用的MIME类型。...19.本地存储泄漏 一个小而高效的脚本,它从浏览器的HTML5本地存储收集所有数据,并通过映像加载将它们发送回第三方服务器。...25.内联 实现可移植内联HTML5 web worker定义的通用脚本。调用外部脚本不再是必需的,这使得这种类型的攻击更容易执行(并且难以检测到……)。...32.TP-Link路由器配置更改 该脚本使用默认凭证访问TP-Link路由器(虽然它们可能是“强制性的”),并在配置中执行2次更改。

    14.1K80

    30分钟学会前端模块化开发

    理想状况下,每个加载的脚本都是通过define()来定义的一个模块;但有些"浏览器全局变量注入"型的传统/遗留库并没有使用define()来定义它们的依赖关系,你必须为此使用shim config来指明它们的依赖关系...( "jquery", [], function () { return jQuery; } ); } 其工作的原理是,所使用的脚本加载器通过指定一个属性,即 define.amd.jQuery 为 true...理解匿名 AMD 模块定义的拼合脚本。...模块不同于传统的脚本文件,它良好地定义了一个作用域来避免全局名称空间污染。...RequireJS的模块语法允许它尽快地加载多个模块,虽然加载的顺序不定,但依赖的顺序最终是正确的。同时因为无需创建全局变量,甚至可以做到在同一个页面上同时加载同一模块的不同版本。

    4.5K50

    JavaScript 匿名函数几种执行方式

    (function(){ //代码 })(); 解释:这是相当优雅的代码(如果你首次看见可能会一头雾水:)),包围函数(function(){})的第一对括号向脚本返回未命名的函数...函数表达式 var fnName = function () {…};使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式,这是最常见的函数表达式语法形式。...、+、 -甚至是逗号等到都可以起到函数定义后立即执行的效果,而()、!...JQuery使用的就是这种方法,将JQuery代码包裹在( function (window,undefined){…jquery代码…} (window)中,在全局作用域中调用JQuery代码时,可以达到保护...JQuery内部变量的作用。

    1.4K30

    Hexo异步加载方案

    虽然,可能是先加载完成,如果它被缓存了的话,那么它就会先执行。换句话说,异步脚本以的顺序执行。...这个很适合使用到Vue和jquery等js框架的js脚本,给它们添加defer属性以后,可以确保HTML加载完毕,且js下载完毕后,各个js脚本继续按照引入的顺序执行,从而确保不会因为依赖缺失而报错。...既然js可以异步加载,那CSS理论上应该也可以。虽然不能像js一样直接通过async和defer来定义加载顺序那么方便。...实际上就是使用@import引入自定义样式。...相信很多小伙伴在看了上述的CSS异步加载方案后,肯定迫不及待的去给自己博客的魔改自定义样式添加异步加载属性了,就算不是,现在也给我演一下,配合我的工作,这么做虽然可以减少HTML页面阻塞,但是很可能会出现首屏页面有那么几秒钟存在大片无样式的板块的情况

    2.1K20

    【JS】382- JavaScript 模块化方案总结

    CommonJS CommonJS 的一个模块就是一个脚本文件,通过执行该文件来加载模块。CommonJS 规范规定,每个模块内部,module 变量代表当前模块。...如果这样写 module.exports = sayHello; // 调用则需要改为 var sayHello = require('module'); sayHello(); require 命令第一次加载该脚本时就会执行整个脚本...AMD 全称 Asynchronous Module Definition,即异步模块定义。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。...所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。除了和 CommonJS 同步加载方式不同之外,AMD 在模块的定义与引用上也有所不同。 define(id?..., factory); AMD 的模块引入由 define 方法来定义,在 define API 中: id:模块名称,或者模块加载器请求的指定脚本的名字; dependencies:是个定义中模块所依赖模块的数组

    1K30

    requireJS

    它非常适合在浏览器中使用,使用RequireJS加载模块化脚本将提高代码的加载速度和质量。 一、CommonJS和AMD 在介绍requireJS之前,要先说一下模块规范。...所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。...(2)js文件之间存在依赖关系,必须严格保证加载顺序。而且脚本的加载是同步的。 解决方案: (1)可以使用async和defer关键字使得加载异步,但可能因此在加载过程中丢失加载的顺序。...RequireJS等待所有的依赖加载完毕,计算出模块定义函数正确调用顺序,然后依次调用它们。...但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合,比如underscore和backbone这两个库。

    2K73

    JavaScript中的各种模块化规范

    模块把接口暴露到全局对象下(比如window),各个模块可以通过全局对象访问各个依赖的接口,但是也存在一些问题: 1、挂在全局对象下容易产生冲突 2、各个脚本加载的必须严格按照依赖顺序,不然可能就玩不转...3、在一个特别大的项目中,引用的脚本就会特别多,script 标签就会特别多,并且难以维护。...Well 1、解决了模块异步加载的问题 2、解决了多个脚本并行加载的问题 Less Well 1、代码太过臃肿,不够优雅,难以阅读和书写 2、但是似乎又是某种解决方案 AMD被使用的最广泛的实现方案无疑就是...require.js 了 CMD表示不服 CMD是SeaJS 在推广过程中对模块定义的规范化产出 CMD 规范中定义了 define 函数有一个公有属性 define.cmd。.../b'); b.test(); } }); 虽然AMD也支持CMD写法,但依赖前置是官方文档的默认模块定义写法。

    1K90

    30分钟全面解析-图解AJAX原理

    这种方式虽然实现了部分刷新,但是是页面的重载,所以也会带来性能上的问题。...这是在编写客户端脚本时你会发现的一个跨浏览器兼容的问题。 3.POST 可以用send方法发送额外信息。发送的信息存放在content中 4.Post方式需要指定Request Header的类型。...有5个可取值:0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成 responseText 服务器的响应,返回数据的文本。...php //定义返回的Response的格式为JSON格式 header('Content-type: text/json'); //引入自定义的数据库连接文件 include...版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。 特此声明:所有评论和私信都会在第一时间回复。

    4.3K121
    领券