找到当前script tag的parent

最新推荐文章于 2021-12-15 12:44:38 发布

转载最新推荐文章于 2021-12-15 12:44:38 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dlbrant/archive/2013/06/13/3134333.html

本文详细阐述了JavaScript脚本是如何按照在文档中出现的顺序执行，并通过一个具体的示例展示了如何获取最后一个script标签及其父元素，同时提供了在iframe中的相关实践指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js脚本是按其出现在文档中的顺序执行的。

<script> tag的内容总是在被解析到的时候被js引擎解释，所以最后一个script tag总是当前正在解析的script tag， sample如下：

<div>

<script>
　　var scriptTag = document.getElementsByTagName('script');
    scriptTag = scriptTag[scriptTag.length -1];
　　var parent = scriptTag.parentNode;
</script>

</div>

 
如果是iframe，需要参考：
http://hi.baidu.com/gclzy/item/88bf943032b517332f20c46d

转载于:https://www.cnblogs.com/dlbrant/archive/2013/06/13/3134333.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30457465

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

防止页面中js文件重复引入报错问题解决方法浅谈

chikuitu2122的博客

01-01

1588

今天使用layerUI做页面布局，index主页面嵌套子页面，因为在子页面中重复引入layui.js，layerui上传图片事件导致前台页面报错——layer is not a valid module；该错误也可能是引入的jquery放在了layui.js后面导致报错；百度寻得解决方...

微信小程序富文本解析组件wxParse "Setting data field "content" to undefined is invalid" 错误

热门推荐

奔跑的蚂蚁

06-13

1万+

小程序商品详情页在加载商品详情的时候用到了富文本解析组件wxParse，但是再用的时候页面一直报一个错误，Setting data field "content" to undefined is invalid，js: that.setData({ goods_id: res.details.goods_id, content: WxParse.wxParse('conte...

参与评论您还未登录，请先登录后发表或查看评论

Remove Duplicate Scripts .

Frank的专栏

07-12

366

It hurts performance to include the same JavaScript file twice in one page. This isn't as unusual as you might think. A review of the ten top U.S. web sites shows that two of them contain a duplicated

关于同一个页面多个相同<script> 标签的问题回顾

chengkairen2的专栏

08-05

1214

今天我提了一个问题如何避免多个相同的 script 或 link标签重复访问加载资源虽然最后问题有了答案 ,那就是同一个页面存在多个相同的script 标签并且没有禁用缓存时。只有第一次会访问服务器获取数据，其后重复的资源都会从缓存中加载。不过根据我的实验，多个标签情况下，数据确实会被重复加载多次，而不是仅加载一次。典型的实验是在要加载的js中添加一个ale...

java script重复显示,令人困惑的“重复标识符”Typescript错误消息

weixin_31088435的博客

03-13

543

vue Duplicate keys detected警告，检测到重复秘钥

星空的日常博客，希望日常能给你帮助

12-15

8725

vue Duplicate keys detected警告，检测到重复秘钥

在vue中引入多个script标签

嘿嘿

04-21

1万+

注意：vue是单文件，只能直接引入一个script标签，其他的需要去创建。 1.可以在index.html中引入，在HTML文件中可以引入多个script标签。 <head> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lOOL1od96eckPqsk...

data[i] is underfined

Mayflyingdancing的博客

07-08

278

返回json为数组时，这里不知道为何会报错找了半天，原来是i<=data.length的时候写多了一个=号，超出了，所以提示未定义一个简单又容易忽视的错误。。。

学习日记-Adobe 卸载美工软件

轻风细雨_林木木

06-09

490

详细说明: http://www.yishimei.cn/network/392.html

Eclipse中jsp页面中js脚本报错this inspection checks that the script tag content is valid XML.

Lemostic的博客

01-30

8978

首先，js代码没有错误，在里面使用了el表达式，但是编辑器总是提示this inspection checks that the script tag content is valid XML，解决办法如下：关闭js校验，这个就不用多说了，Preference中关闭即可。修改页面的文档类型，由修改为，代码就不会再提示错误了。

vue 开发duplicate keys detected

m0_37540382的博客

02-18

467

我的页面中存在两个v-for，可以将 v-for="(item,index) of list" :key="index" 替换为 v-for="(item,index) of list" :key="index + '-label' " 参考文章：https://www.jianshu.com/p/4bc3c6688e09 ...

微信小程序弹幕

晏金煜的博客

04-09

4575

<view class="container"> <view class="doommview"> <view style="position: absolute;width:100%;height:100rpx;background:red;top:0rpx;"> &l

vue中通过script的形式使用外部库

kinding的博客

12-05

8638

如：index.html中： <script src="http://unpkg.com/vue/dist/vue.js"></script>  <script src="//webapi.amap.com/maps?v=1.3&key=e1dedc6bdd765d46693986ff7ff969f4">&

rubygem-mixlib-log-3.0.9-1.el8.tar.gz

08-18

# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm

C# BMS上位机源码解析：串口通信与数据库存储的关键技术实现

最新发布

08-18

基于C#语言开发的BMS（电池管理系统）上位机软件的关键技术。文章首先阐述了上位机软件在电池管理系统中的重要性，随后重点讲解了串口通信和数据库存储两个核心技术模块的具体实现方法。对于串口通信部分，文中通过具体的C#代码示例演示了如何利用SerialPort类完成数据的读写操作，并强调了预设串口协议带来的良好扩展性。针对数据库存储方面，则展示了借助ADO.NET或Entity Framework技术实现与SQL Server数据库交互的方式，包括建立连接、执行SQL语句等步骤，从而确保能够高效地保存从串口接收到的数据，以便进一步进行数据分析和处理。适合人群：具有一定编程经验的技术人员，尤其是从事嵌入式系统、物联网设备或电池管理系统开发的相关从业者。使用场景及目标：适用于希望深入了解C#环境下BMS上位机开发流程的学习者；旨在帮助开发者掌握串口通信和数据库存储两大核心技能，提高其解决实际项目中类似问题的能力。其他说明：文中提供的示例代码有助于读者更好地理解和实践文中提到的概念和技术点，在此基础上可根据自身项目的特定需求做适当调整和优化。

08-18

内容概要：本文介绍了两种基于蒙特卡洛方法的风电和光伏功率场景生成方法，分别是普通蒙特卡洛方法和考虑时间相关性的蒙特卡洛方法。普通蒙特卡洛方法通过随机生成风速和光照强度来计算功率，但未考虑时间相关性。而考虑时间相关性的蒙特卡洛方法则利用多元高斯分布构建时间相关性，从而更真实地反映风电和光伏出力的变化情况。文中详细描述了这两种方法的具体步骤，并通过对比分析展示了考虑时间相关性的方法能更好地模拟实际场景。最后，通过后向削减法筛选出典型场景及其概率。适合人群：从事电力系统规划、调度和运营的专业人士，以及对风电和光伏功率预测感兴趣的科研人员和技术开发者。使用场景及目标：适用于需要进行风电和光伏功率预测的项目，旨在提高预测准确性，优化电力系统的运行和管理。其他说明：本文由作者原创编写，提供了详细的理论背景和实施步骤，并附有参考文献供进一步研究。

MATLAB实现数字基带信号编码及功率谱分析：涵盖多种编码方式的技术详解与应用 · 编码方式

08-18

内容概要：本文档详细介绍了使用MATLAB实现常见的数字基带信号编码方法及其功率谱分析。涵盖了单极性和双极性非归零码、归零码、差分码、数字双相码、密勒码、AMI码和HDB3码等多种编码方式。每种编码方式都配有详细的程序注释和技术文档，帮助读者理解其特性和应用场景。文中还提供了具体的MATLAB代码示例，如生成基础波形的函数nrz_generator、计算并绘制功率谱的函数plot_power_spectrum以及各种编码器的具体实现。通过对不同编码方式的频谱分析，展示了它们各自的特点和适用范围。适合人群：对数字通信系统感兴趣的工程技术人员、科研人员及高校相关专业学生。使用场景及目标：适用于希望深入了解数字基带信号编码原理及其功率谱特性的人群。通过实际编程练习，掌握不同类型编码的生成方法和频谱特点，为后续研究和应用打下坚实基础。其他说明：文档不仅提供理论解释，还包括大量实用的MATLAB代码片段，便于读者动手实践。同时，通过对比不同编码方式的功率谱，直观地展示了各自的优缺点，有助于选择最适合特定应用场景的编码方式。

sane-backends-libs-1.0.27-22.el8.tar.gz

08-18

# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm

<el-tree-select 自定义tag

08-01

<think>我们正在使用Element Plus（Vue3版本），而用户提到的是Element UI（Vue2版本），但原理类似。用户想要在`<el-tree-select>`组件中自定义标签，显示为“公司-员工”格式。根据之前的回答，我们已经通过`#tag`插槽实现了自定义标签。现在用户再次确认，我们可以强调关键部分：关键点： 1. 使用`#tag`插槽自定义选中后在输入框内显示的标签。 2. 在插槽内，我们可以根据当前节点数据（员工节点）获取其公司名称，然后拼接显示。注意：在树形选择器中，选中的只能是叶子节点（员工），公司节点应该被禁用（通过`props`中的`disabled`设置）。因此，我们可以这样回答用户：在Element Plus的`el-tree-select`组件中，您可以通过`#tag`插槽自定义输入框内显示的标签格式。具体步骤如下：步骤1：在`el-tree-select`组件中使用`#tag`插槽，该插槽会提供当前选中的节点数据。步骤2：在插槽内，您可以根据员工节点的数据（其中应包含公司ID）找到对应的公司名称，然后拼接成“公司名称-员工名称”的格式。示例代码片段（基于之前的完整示例）： ```vue <el-tree-select ...> <template #tag="{ data }"> <el-tag closable @close="removeTag(data)"> {{ getCompanyName(data) }} - {{ data.name }} </el-tag> </template> </el-tree-select> ``` 其中，`getCompanyName`是一个方法，用于根据员工节点的公司ID查找公司名称。步骤3：确保数据结构中，每个员工节点都有其所属公司的标识（如`companyId`），这样在`getCompanyName`方法中可以通过该标识找到公司节点。步骤4：公司节点需要设置为不可选（禁用），避免用户选择公司节点。可以通过`props`配置中的`disabled`属性来实现。示例： ```js const treeProps = { // ...其他配置 disabled: (data) => data.type === 'company' // 如果是公司节点则禁用 } ``` 这样，用户只能选择员工节点，并且在输入框中显示的标签格式为“公司名称-员工名称”。注意：如果使用的是Element UI（Vue2），则没有内置的`el-tree-select`组件，需要自己组合`el-select`和`el-tree`，但用户问题中明确提到了`el-tree-select`，所以我们以Element Plus为例。根据引用[1]和[3]，在Element UI中需要自己封装，但用户现在使用的是Element Plus，所以直接使用`el-tree-select`组件即可。因此，总结回答：通过`#tag`插槽自定义标签内容，拼接公司名称和员工名称即可。如果用户需要更详细的代码，可以参考之前的完整示例。</think>在 Element Plus 的 `<el-tree-select>` 组件中自定义标签显示为"公司-员工"格式，可以通过以下步骤实现： ### 关键实现方案 1. **使用 `#tag` 插槽自定义标签** ```vue <el-tree-select v-model="selectedEmployees" :data="companyData"> <template #tag="{ data }"> <el-tag closable @close="removeEmployee(data)"> {{ getCompanyName(data) }} - {{ data.name }} </el-tag> </template> </el-tree-select> ``` 2. **实现公司名称获取方法** ```javascript const getCompanyName = (employee) => { // 从员工节点向上查找公司节点 let node = employee while (node.parent && node.parent.type !== 'company') { node = node.parent } return node.parent ? node.parent.name : '未知公司' } ``` 3. **数据结构设计（关键）** ```javascript const companyData = ref([ { id: 'c1', name: '腾讯科技', type: 'company', children: [ { id: 'e1', name: '张三', type: 'employee', // 添加父节点引用 parent: null // 在created/mounted中动态设置 } ] } ]) ``` ### 完整实现代码 ```vue <template> <el-tree-select v-model="selectedEmployees" :data="companyData" :props="treeProps" multiple filterable placeholder="请选择员工" class="custom-tree-select" >  <template #tag="{ data }"> <el-tag closable size="medium" @close="removeEmployee(data)" class="employee-tag" > {{ getCompanyName(data) }} - {{ data.name }} </el-tag> </template>  <template #default="{ node, data }"> <span v-if="data.type === 'company'" class="company-node"> <el-icon><OfficeBuilding /></el-icon> {{ data.name }} </span> <span v-else class="employee-node"> <el-icon><User /></el-icon> {{ data.name }} </span> </template> </el-tree-select> </template> <script setup> import { ref, onMounted } from 'vue' import { OfficeBuilding, User } from '@element-plus/icons-vue' // 树形数据 const companyData = ref([ { id: 'c1', name: '腾讯科技', type: 'company', children: [ { id: 'e1', name: '张三', type: 'employee' }, { id: 'e2', name: '李四', type: 'employee' }, { id: 'e3', name: '王五', type: 'employee' } ] }, { id: 'c2', name: '阿里巴巴', type: 'company', children: [ { id: 'e4', name: '赵六', type: 'employee' }, { id: 'e5', name: '钱七', type: 'employee' }, { id: 'e6', name: '孙八', type: 'employee' } ] } ]) // 树配置 const treeProps = { value: 'id', label: 'name', children: 'children', disabled: (data) => data.type === 'company' // 禁用公司节点选择 } // 选中的员工 const selectedEmployees = ref([]) // 获取公司名称 const getCompanyName = (employee) => { // 从节点向上查找公司节点 let node = employee while (node.parent && node.parent.type !== 'company') { node = node.parent } return node.parent ? node.parent.name : '未知公司' } // 删除员工 const removeEmployee = (employee) => { selectedEmployees.value = selectedEmployees.value.filter( emp => emp.id !== employee.id ) } // 初始化时设置父子关系 onMounted(() => { const setParent = (node, parent) => { node.parent = parent if (node.children) { node.children.forEach(child => setParent(child, node)) } } companyData.value.forEach(company => { setParent(company, null) }) }) </script> <style scoped> .custom-tree-select { width: 100%; } .employee-tag { margin: 2px 6px 2px 0; background: #ecf5ff; border-color: #d9ecff; color: #409eff; } .company-node { color: #f56c6c; font-weight: 600; } .employee-node { color: #606266; } </style> ``` ### 关键说明 1. **父子关系建立**： - 在 `onMounted` 生命周期钩子中递归设置 `parent` 属性 - 这样可以在员工节点直接访问所属公司节点 2. **公司名称查找**： ```javascript const getCompanyName = (employee) => { let node = employee // 向上遍历直到找到公司节点 while (node.parent && node.parent.type !== 'company') { node = node.parent } return node.parent ? node.parent.name : '未知公司' } ``` 3. **禁用公司选择**： ```javascript const treeProps = { disabled: (data) => data.type === 'company' } ``` 确保用户只能选择员工节点，不能选择公司节点[^1] 4. **数据结构优化**： - 每个节点添加 `type` 属性区分公司和员工 - 使用嵌套结构保持父子关系 - 动态设置 `parent` 引用便于向上查找 ### 替代方案（无 parent 引用）如果不想修改数据结构，可以使用节点 ID 映射： ```javascript // 创建公司ID映射 const companyMap = ref({}) onMounted(() => { companyData.value.forEach(company => { company.children?.forEach(employee => { companyMap.value[employee.id] = company }) }) }) // 获取公司名称 const getCompanyName = (employee) => { return companyMap.value[employee.id]?.name || '未知公司' } ``` 这种方法不需要修改原始数据结构，通过映射表查找公司信息[^3]。 ### 注意事项 1. **Element Plus 版本**：确保使用 Element Plus v2.0+（对应 Vue 3） 2. **图标导入**：需要单独安装 `@element-plus/icons-vue` 3. **多选模式**：`multiple` 属性启用多选 4. **性能优化**：对于大型数据集，建议使用虚拟滚动这样实现后，选中的员工在输入框中会显示为"公司名称-员工名称"的格式，符合您的需求[^2]。