js 获取script参数方式

最新推荐文章于 2023-03-04 13:22:33 发布
最新推荐文章于 2023-03-04 13:22:33 发布 · 1.9k 阅读 · 0
文章标签：

#前端 #后端 #javascript #ViewUI

本文介绍了在JavaScript中如何获取从前端页面传递过来的参数，包括通过URL查询字符串和利用HTML script元素的data属性两种实现方式。重点强调了通过id读取data属性的方法，确保定义明确且易于理解。

需求：

在js中需要获取前面传过来的参数，比如当前的域名或者某种后台传递过来的值

实现方式：

第一种通过js后面传递参数如:demo.js?v=1.2

此种方式通过document.scripts获取其src值，然后正则读取，没有第二种好

第二种利用属性：

<script src="demo.js" type="text/javascript" data="yourpath"  id="basePathScript">
</script>

js中直接获取：

var basePath = document.getElementById('basePathScript').getAttribute('data');

 

优点：

定义明确通过js的id读取

《web开发： JavaScript DOM获取元素》
yexiang优快云的专栏
01-08 1268
一、JavaScript DOM获取元素 1、DOM获取元素 1.1 如何获取页面元素 DOM在我们实际开发中主要用来操作元素。 我们如何来获取页面中的元素呢? 1.1 如何获取页面元素 获取页面中的元素可以使用以下几种方式:  根据 ID 获取  根据标签名获取  通过 HTML5 新增的方法获取  特殊元素获取 1.2 根据 ID 获取 使用 getElementById() 方法可以获取带有 ID 的元素对象。 document.getElementByI...
javascript 获取url参数和script标签中获取url参数函数代码
10-29
本文将详细介绍如何通过JavaScript获取URL参数和script标签中的参数，并提供相应的函数代码。 首先，我们来看如何获取URL参数。在JavaScript中，`document.location.search`属性可以获取URL中的查询字符串（即URL中...
js中动态获取页面的script地址，并动态给他添加script标签和地址，解决页面白屏问题
浩星
02-05 1345
前言：（业务逻辑） 在vue中，遇到这样的情况，初始化加载太多js，导致页面白屏，为了解决这个情况，决定使用具体组件具体加载相应的cdn地址。 为啥不用vue的按需加载呢，是因为我们项目对性能要求很高，但是按需加载后，引入的插件包，打包以后的大小比cdn要大太多了，整体来说是使用他是得不偿失，但是一次性加载太多cdn又会导致白屏，所以在这里我使用的方法：具体某个页面使用第三方插件，就在使用的页面js动态加载scirpt，并给他上标签 具体操作： 1、面临第一个问题，要先...
python爬虫— 利用js2xml 获取 script 数据
冻梨不是梨的博客
06-15 8892
处理script中数据的最新方法，请看这个 主要介绍利用js2xml来获取<script>数据 1. 待获取网页：url：https://s.taobao.com/search?q=%E6%89%8B%E6%9C%BA&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb...
【JS】获取当前＜script＞标签src属性的url跟的参数和相对路径（无论引入的JS是外部、内部）
南方者的博客
05-09 3350
获取当前<script>标签src属性的url跟的参数和相对路径（无论引入的JS是外部、内部）因为代码和逻辑都比较简单，也有一些注释，就直接上代码了！...
JS全局变量是如何工作的？
Yvette Lau的专栏
08-28 220
原文: https://2ality.com/2019/07/global-scope.html翻译: 刘小夕在这篇博文中，我们将研究JavaScript的全局变量是...
精选资源
javascript[js]获取url参数的代码
01-21
最近做个页面，需要用javascript获取url参数，可发现网上的东西，实在是多了，错误也实在是多啊，真晕，浪费了我不少时间于是，我便总结一下，一个好用的就可以了，先声明下，用正则，是简单，但多浏览器的兼容性，...
精选资源
javascript 获取url参数的正则表达式(用来获取某个参数值)
01-21
例子: //javascript传参数(多个) var url = “B.aspx?txtA=”+document.getElementById(“txtName”).value; url +=”&txtB=”+document.getElementById(“txtAge”).value; window.open(url,’xWindow’,’width=...
html页面动态获取连接参数 jquery.params.js
09-06
总结，`jquery.params.js`扩展使得在HTML页面中动态获取、修改和操作URL参数变得简单。通过引入这个文件并利用`$.query`方法，我们可以方便地处理页面间的数据传递，提高页面的交互性。在实际开发中，这种功能常用于...
JavaScript＜script＞标签引用以及内容输出
weixin_69420643的博客
09-13 1962
1、JavaScript标签的引用，2、js文件的引用，3、JavaScript的输出
JavaScript获取元素的方式
M_ik_Z的博客
05-20 505
获取元素的三种基本方式 一、 通过id名称获取元素: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
Javascript 获取标签内容的方法
demopy’s blog
12-27 5388
JS获取标签内容的方法 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box"> <p>这有个 第一个p</p> ​ <p>这
JS JavaScript获取Url参数，src属性参数
_小九的博客
11-28 1587
JS JavaScript获取Url参数，src属性参数
package.json中scripts配置环境变量区分开发环境和生产环境
bamboozjy的博客
11-23 7285
有时候打包时要区分打生产环境的包还是开发环境的包,这样判断需要用哪个baseurl或者其他变量 方法1: //windows操作系统下: "builddev": "set NODE_ENV=dev&&vue-cli-service build", "buildprod": "set NODE_ENV=prod&&vue-cli-service build", //mac操作系统下: "builddev": "export NODE_ENV=dev&&am.
网络应用之javascript获取标签元素
qq_41810183的博客
03-04 1762
上面的代码，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载。“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的数据，好比 python 里面的列表。onload是页面所有元素加载完成的事件，给onload设置函数时，当事件触发就会执行设置的函数。
script中各种命令的配置
aliven1的博客
04-21 878
"scripts": { "serve": "vue-cli-service serve --mode dev", "test": "vue-cli-service build --mode dev", "build": "vue-cli-service build --mode dev", "lint": "vue-cli-service lint" }, 1.mode dev：方便查看运行代码的错误行号； 2.test，js会编译成单文件 3.build会按生产编译
Shell script的语法三：设置参数
heart_1014的博客
01-10 747
一、script中命令的变量名 该变量名已系统预定义，如下： /path/to/scriptname opt1 opt2 opt3 opt4 ${0} ${1} ${2} ${3} ${4} 执行的脚本名称为${0}这个变量名，接的第一个参数的变量名是${1}，第二个参数的变量名是${2}…… 除了这些数字的变
JavaScript
lanziDemo blog
11-06 513
今日目标JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？如改变页面内容、修改指定元素的属性值、对表单进行校验等，下面是这些功能的效果展示：改变页面内容当我点击上面左图的 按钮，按钮上面的文本就改为上面右图内容，这就是js 改变页面内容的功能。修改指
【正则表达式】获取html代码文本内所有＜script＞标签内容
HYY的博客
02-11 7060
之前要对学生提交的html代码进行检查，在获取了学生提交的html代码文本后，需要使用正则去截取内部的script标签内容做进一步的检查。看上去不难，但是实际操作起来有一定的坑，最大的问题是学生可能在标签内部写的代码里也出现了“假设得到html文本如下（不是代码），我们要得到全部的script标签内容并提取出来。里面有字符xxx的情况，所以我们还需要放开对里面字符的限制。但是，这样会带来新的问题，所有的字符都被囊括进去，无法匹配到所有的标签。在实际应用中，我们得到这些标签内容后可以进一步刨去两个首尾标签。
vue js获取route参数
最新发布
08-15
在 Vue.js 中，可以通过 `this.$route.params` 和 `this.$route.query` 来获取路由参数和查询参数。这些参数通常在路由配置中定义，并在组件中进行访问以实现动态内容展示或逻辑控制。 ### 获取路由参数 1. 在定义路由时，可以通过 `path` 属性指定带有参数的路径，例如 `/user/:id`，其中 `:id` 是路由参数。一旦路由匹配成功，该参数将被存储在 `$route.params` 对象中。例如，如果导航到 `/user/123`，那么 `$route.params.id` 的值将是 `"123"` [^1]。 在组件中，可以直接通过 `this.$route.params.id` 访问这个参数 [^2]。例如： ```vue <template> <div> <p>用户ID: {{ userId }}</p> </div> </template> <script> export default { data() { return { userId: this.$route.params.id }; } }; </script> ``` ### 获取查询参数 除了路由参数，URL 中还可能包含查询参数（Query Parameters），例如 `/search?query=vue`。可以通过 `this.$route.query` 来获取这些参数，它返回一个包含所有查询参数的对象。例如： ```vue <template> <div> <p>查询关键词: {{ query }}</p> </div> </template> <script> export default { data() { return { query: this.$route.query.query }; } }; </script> ``` ### 动态响应路由参数变化 当路由参数发生变化但组件被复用时（例如从 `/user/123` 导航到 `/user/456`），需要监听 `$route` 的变化以更新组件状态。可以通过 `watch` 监听 `$route` 对象： ```vue <script> export default { watch: { '$route'(to, from) { // 处理路由变化，例如更新用户信息 this.userId = to.params.id; } }, data() { return { userId: this.$route.params.id }; } }; </script> ``` ### 使用 `props` 传递路由参数 另一种更清晰的方式是通过 `props` 将路由参数传递给组件。在路由配置中设置 `props: true`，这样组件可以直接通过 `props` 接收参数： ```javascript const routes = [ { path: '/user/:id', component: User, props: true } ]; ``` 然后在组件中声明 `props`： ```vue <script> export default { props: ['id'] }; </script> ``` 这样可以避免直接依赖 `$route`，使组件更容易测试和复用 [^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值