正文 

当前位置： 首页 > 知识 >

如何指示用作 js 挂钩的链接？或者 rel="js" 语义替换

     2023-02-24     55

关键词：

【中文标题】如何指示用作 js 挂钩的链接？或者 rel="js" 语义替换【英文标题】：How to indicate links used as hooks for js? Or rel="js" semantic replacement 【发布时间】：2011-10-31 13:37:03 【问题描述】：

我正在寻找好的/语义/传递验证方式来指示我的链接，这些链接用作 javascript 的钩子。

<a href="somelink" rel="js">link</a>

据我了解，“rel”更多的是关于文档之间的关系。此外，“data-lang”（from here）感觉也不是一个足够好的解决方案。

提前非常感谢！

【问题讨论】：

问题是：您的链接是否可以在没有 JavaScript 的情况下工作（因此，使用 JavaScript，它们只是“增强”，例如允许部分重新加载页面，而不是完全刷新）或者它们是“伪-links”，并且它们仅用于支持 JS 的功能？ @gryzzly 目前我只有“伪链接”，但我想听听这两种情况的解决方案:) 【参考方案1】：

您可以使用class-属性，或者在 HTML5 中使用custom data-attributes。

【讨论】：

问题不在于如何将数据传递给 JavaScript。它是关于如何在标记中显示这些链接不是指向网络资源或内部锚点的链接，而仅仅是 JavaScript 触发器。【参考方案2】：

如果链接是“增强”链接，它的作用与通常的链接几乎相同，但以更“用户友好”的方式 - 例如导航链接，当 JavaScript 启用时页面，将仅重新加载页面的“内容”部分并使用HTML5 History API 更新页面的地址——然后我将只使用语义类，实际描述链接，例如“导航”。

如果它们是 JavaScript 触发器，并且在 JavaScript 关闭时它们将无法运行 - 我建议根本不要使用 a 元素。来自spec：

如果a 元素有href 属性，那么它代表一个超链接 （超文本锚）。如果a 元素没有href 属性，则 element 表示链接可能具有的占位符 放置，如果它是相关的。

我相信在大多数情况下，“动作触发器”并不真正适合使用 a 元素的描述。因此，我建议使用span 元素，该元素的样式会暗示它是交互的触发器。再次引用spec：

span 元素本身没有任何意义，但很有用 当与全局属性一起使用时，例如class、lang 或 dir。它代表它的孩子。

关于这些触发器的另一个建议：使用这行代码（文档头部中 &lt;title&gt; 之后的第一件事），以便为您的 html 元素提供一个类 js：

<script>document.documentElement.className = 'js';</script>

然后在你的 CSS 中这样做：

/* 
assuming that this is your mark-up for the pseudo-links:
<span class="action-trigger">Beautiful transition</span>
*/
.action-trigger 
    display:none;
    visibility:hidden;

.js .action-trigger 
    display:inline;/* or whatever suits your styling of these elements */
    visibility:visible;

这样，当 JavaScript 被禁用时，用户将看不到需要采取行动但实际上不起作用的“伪链接”。

UPD。从语义上讲，在某些情况下，您还可以使用表单提交元素，例如&lt;button&gt;：作为示例——您可以触发表单提交——所有“投票”/“喜欢”/“删除”功能都属于这一类。其中，当 JS 被禁用时会真正提交该表单，但是当 JS 被启用时，会触发后端 API 一侧的操作。

【讨论】：

另一种选择是使用 JavaScript 添加 a 元素，必要时替换占位符 span 元素。不要忘记启用 JS 但关闭 CSS 的用户 ;) 从“语义”的角度来看这很好，但从性能的角度来看却没有那么好 :-) 虽然，“语义/验证器”案例并不真正适用于开发大量 JS 的网络应用程序... 在这种情况下，我更喜欢使用 ，以保留将焦点移到它上面的选项（使用选项卡）.. 您可以通过将tabindex 属性添加到span: jsfiddle.net/gryzzly/nswUZ/1 来添加专注于span 的功能，但同样，为了完全模拟链接的UI，它可能需要一些试验和错误。

如何从标题中的链接访问“rel”？超媒体链接关系

】如何从标题中的链接访问“rel”？超媒体链接关系【英文标题】：Howtoaccess\'rel\'fromLinksinheader?Hypermedialinkrelations【发布时间】：2018-05-0700:59:06【问题描述】：我正在使用json服务器和axios标题的结果link:"<http://localhost:3001/posts?_p... 查看详情

如何在 gradle 启动测试中关闭关闭挂钩的输出？

】如何在gradle启动测试中关闭关闭挂钩的输出？【英文标题】：Howtoturnoffoutputfromshutdownhooksingradleboottests?【发布时间】：2020-05-1800:08:07【问题描述】：你可以从https://start.spring.io/starter.zip?type=gradle-project&language=java&bootVersion=2... 查看详情

js如何实现a标签的rel属性？？？？

<atarget="_blank"href="xxx"rel="shadowbox"><imgsrc="xxx"/></a>以上代码调用了shadowbox插件做了个图片展示的效果，能不能改成通过img的onclick事件调用js来实现。或者说有没有方法让window.location.href（w... 查看详情

链接 rel="preload" 究竟是如何工作的？

】链接rel="preload"究竟是如何工作的？【英文标题】：Howexactlydoeslinkrel="preload"work?【发布时间】：2016-08-0701:43:27【问题描述】：Chrome的新版本增加了对&lt;linkrel="preload"&gt;的支持。他们发布了很多参考... 查看详情

如何访问在另一个 js 文件中的反应挂钩中完成的状态值

】如何访问在另一个js文件中的反应挂钩中完成的状态值【英文标题】：HowcanIaccessastatevaluedoneinreacthooksinanotherjsfile【发布时间】：2019-12-0702:20:21【问题描述】：我正在研究一个搜索栏，它在另一个文件中将调用unsplash-api，我有一... 查看详情

如何使用 node js 开发实时聊天

】如何使用nodejs开发实时聊天【英文标题】：Howtodeveloplivechatusingnodejs【发布时间】：2016-08-0401:35:25【问题描述】：我想使用nodejs开发实时聊天。谁能指导我如何做到这一点？我决定的用例：用户将在应用屏幕上看到标有“在线... 查看详情

链接属性rel=’external’rel=’nofollow’rel=’externalnofollow’三种写法的区别

...el=’nofllow’的作用，它是告诉搜索引擎，不要将该链接计入权重。因此多数情况下，我们可以将一些不想传递权重的链接进行nofllow处理；例如一些非本站的链接，不想传递权重，但是又需要加在页面中的像统计代码、备... 查看详情

如何在页面加载时设置 useState 挂钩的状态？

】如何在页面加载时设置useState挂钩的状态？【英文标题】：HowtosetthestateofauseStatehookonpageload?【发布时间】：2022-01-1601:22:53【问题描述】：我正在尝试创建响应式导航。它有一个_函数：在屏幕宽度上显示导航链接>页面加载时... 查看详情

如何从 Node.js / Express 应用程序的 Mongoose 预挂钩中查询？

】如何从Node.js/Express应用程序的Mongoose预挂钩中查询？【英文标题】：HowtoqueryfromwithinMongooseprehookinaNode.js/Expressapp?【发布时间】：2013-10-1709:09:36【问题描述】：我正在使用带有MongooseORM的MongoDB在Node.js/Express中构建一个基本博客。... 查看详情

如何从 Node.js / Express 应用程序的 Mongoose 预挂钩中查询？

】如何从Node.js/Express应用程序的Mongoose预挂钩中查询？【英文标题】：HowtoqueryfromwithinMongooseprehookinaNode.js/Expressapp?【发布时间】：2013-10-1709:09:36【问题描述】：我正在使用带有MongooseORM的MongoDB在Node.js/Express中构建一个基本博客。... 查看详情

如何防止内存编辑以防止挂钩

】如何防止内存编辑以防止挂钩【英文标题】：Howtopreventmemoryeditingtopreventhooking【发布时间】：2018-07-1215:05:00【问题描述】：我最近学习了内联钩子x32和x64，它基于用jmp覆盖函数的第一个字节到钩子函数，或者通过将64地址推送... 查看详情

如何使用 Nuxt.js 将自己的 JS 用作插件

】如何使用Nuxt.js将自己的JS用作插件【英文标题】：HowtouseownJSasapluginusingNuxt.js【发布时间】：2018-03-3001:10:28【问题描述】：我正在使用nuxt.js。我在plugins文件夹中有一个helper.js脚本，它有一个简单的Test()函数。现在如何在helper.js... 查看详情

186-挂钩进程解析(代码片段)

...个BpmnParser类都创建一个新的BpmnParse实例。这个实例将被用作解析过程中所有事物的容器。解析本身非常简单：对于每个BPMN2.0元素&# 查看详情

将 Git 挂钩放入存储库

】将Git挂钩放入存储库【英文标题】：PuttingGithooksintoarepository【发布时间】：2011-03-2815:17:58【问题描述】：将.git/hooks放入项目存储库是否被认为是一种不好的做法（例如，使用符号链接）。如果是，向不同Git用户提供相同钩子... 查看详情

src，href和rel的区别

...URL，包括片段标识符和JavaScript代码段relREL属性用于定义链接的文件和HTML文档之间的关系。StyleSheet，的意思就是样式调用，REL=StyleSheet指定一个固定或首选的样式而REL="AlternateStyleSheet"定义一个交互样式。 &n 查看详情

如何指示组合框已填充选择？

】如何指示组合框已填充选择？【英文标题】：HowdoIindicatethatacomboboxhasbeenpopulatedwithaselection?【发布时间】：2022-01-1413:59:00【问题描述】：我正在尝试在Powershell中创建一个表单。它包含一个ComboBox下拉选项，我将其用作必填字段... 查看详情

如何在 Q 中按顺序链接可变数量的 Promise？

】如何在Q中按顺序链接可变数量的Promise？【英文标题】：HowtochainavariablenumberofpromisesinQ,inorder?【发布时间】：2013-07-1910:07:23【问题描述】：我见过ChaininganarbitrarynumberofpromisesinQ；我的问题不同。如何按顺序进行可变数量的调用，... 查看详情

如何将变量值用作JS对象中的属性[重复]

】如何将变量值用作JS对象中的属性[重复]【英文标题】：howtouseavariablevalueasapropertyinanJSobject[duplicate]【发布时间】：2021-09-0910:59:36【问题描述】：在JS中，我想将变量值用作对象中的属性。例如：letmyVar=\'toto\';letmyObjet=toto:[\'1\',\'... 查看详情