当前位置：文档之家 › 静态html文件js读取url参数

静态html文件js读取url参数

  • 格式：pdf
  • 大小：285.58 KB
  • 文档页数：2

下载文档原格式

  / 2

合集下载

html5加js实现本地文件读取和写入并获取本地文件路径

html5加js实现本地文件读取和写入并获取本地文件路径

html5加js实现本地⽂件读取和写⼊并获取本地⽂件路径最近在做课程设计,需要通过js读取本地⽂件,并且获取本地⽂件路径,然后在搜寻了⼀些资料,在此分享记录⼀下.HTML5提供了⼀台API可以实现⽂件的读写,⽂件读取利⽤API是FileReader代码如下:读取本地⽂件<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div><input type="file" id="files" style="display: none" onchange="fileImport();"><input type="button" id="fileImport" value="导⼊"></div><script src="../js/jQuery/jquery-1.11.1.js"></script><script>//点击导⼊按钮,使files触发点击事件,然后完成读取⽂件的操作$("#fileImport").click(function () {$("#files").click();})function fileImport() {//获取读取我⽂件的File对象var selectedFile = document.getElementById('files').files[0];var name = ;//读取选中⽂件的⽂件名var size = selectedFile.size;//读取选中⽂件的⼤⼩console.log("⽂件名:"+name+"⼤⼩:"+size);var reader = new FileReader();//这是核⼼,读取操作就是由它完成.//reader.readAsText(selectedFile);//读取⽂件的内容,也可以读取⽂件的URLreader.onload = function () {//当读取完成后回调这个函数,然后此时⽂件的内容存储到了result中,直接操作即可console.log(this.result);}}</script></body></html>写⼊⽂件HTML5中与FileReader相对应的也有⼀个FileWriter,FileReader可以被Chrome、FF和Safari都⽀持。

原生JS获取URL链接参数的几种常见方法

原生JS获取URL链接参数的几种常见方法

原⽣JS获取URL链接参数的⼏种常见⽅法前⾔作为⼀个前端开发，我们很多时候都需要对URL进⾏操作和处理，最常见的⼀种就是获取URL链接中携带的参数值了。

使⽤框架开发的⼩伙伴可能会觉得这很简单，因为框架提供了很多⽅法让我们⽅便的获取URL链接携带的参数。

但是有些时候我们不能依赖框架，需要我们使⽤原⽣JS去获取参数，这也是⾯试中经常遇到的⼀道题。

今天我们就⼿撕代码，利⽤原⽣JS去获取URL链接参数值。

1. 获取⽅式总结利⽤原⽣JS获取URL链接参数的⽅法也有好⼏种，今天我们依次来讲解常见的⼏种：通过正则匹配的⽅式利⽤a标签内置⽅法利⽤split⽅法分割法使⽤URLSearchParams⽅法2. 具体实现⽅法2.1 正则匹配法这是⾮常中规中举的⼀种⽅法，重点是要求我们要懂正则表达式。

代码如下：<script>// 利⽤正则表达式let url = "?name=elephant&age=25&sex=male&num=100"// // 返回参数对象function queryURLParams(url) {let pattern = /(\w+)=(\w+)/ig; //定义正则表达式let parames = {}; // 定义参数对象url.replace(pattern, ($, $1, $2) => {parames[$1] = $2;});return parames;}console.log(queryURLParams(url))</script>上段代码中重点是正则表达式的定义以及replace⽅法的使⽤,其中$2分别代表name=elephant、name、elephant，以此类推。

replace结合正则更加详细的使⽤⽅法可以⾃⾏下去学习。

实现效果：2.2 利⽤a标签这种⽅法较少⼈使⽤，因为毕竟有点⿊科技的意思在⾥⾯。

JS通过url地址栏获取html页面名称

JS通过url地址栏获取html页面名称

JS通过url地址栏获取html页面名称有的时候需要获取页面名称，为此我在这里封装了一个方。

一、分别根据传递不同的参数，获取到html页面的名称。

1.通过传递参数，获取到html页面的名称；参数params2.以下是参数解释说明（1）params=1，只获取页面名称，不带.html后缀1.1 例如 url路径是 /home/index.html只返回页面名称： index（2）params=2，取页面名称，同时带.html后缀2.1 例如 url路径是 /home/index.html回页面名称+.html后缀： index.html（3）params=3，获取html父级路径与html名称，同时带.html后缀3.1 例如 url路径是 /home/index.html返回父级路径+页面名称+.html后缀： home/index.html（4）params=4，获取html父级路径与html名称，不带.html 后缀4.1 例如 url路径是 /home/index.html返回父级路径+页面名称，不带 .html后缀: home/index.html （5）params= undefined，params没有值，什么也不传，获取当前html父级路径与当前html页面名称，不带.html后缀//获取url的html页面名称/*params=1，只获取页面名称，不带.html后缀*params=2，取页面名称，同时带.html后缀*params=3，获取html父级路径与html名称，同时带.html后缀*params=4，获取html父级路径与html名称，不带.html后缀*params= undefined，params没有值，什么也不传，获取html父级路径与当前html页面名称，不带.html后缀*/function urlHtml(params) {//获取url地址var ts_href = window.location.href;var ts_mainText="";if(params==1){//获取地址最后一个“/”的下标var ts_indexof = ts_stIndexOf("/");//获取地址“/”之后的的内容var ts_indexText = ts_href.substring(ts_indexof + 1);//获取地址“.html”的下标var ts_htmlBeforeT ext = ts_indexText.indexOf(".html");//获取“/”到".html"之间的内容ts_mainText = ts_indexText.substring(0, ts_htmlBeforeText);}else if(params==2){//获取地址“/”的下标var ts_indexof = ts_stIndexOf("/");//获取地址“/”之后的的内容var ts_indexText = ts_href.substring(ts_indexof + 1);ts_mainText = ts_indexText;}else if(params==3){//获取地址中倒数二个“/”下标的位置的之后的内容var urlParents=ts_href.substr(ts_stIndexOf('/', ts_stIndexOf('/') - 1) + 1);ts_mainText=urlParents}else if(params==4){//获取地址中倒数二个“/”的下标之后的内容var urlParents=ts_href.substr(ts_stIndexOf('/', ts_stIndexOf('/') - 1) + 1);//取到倒数二个“/”的下标的位置和.html之间的内容var beforeHtml = urlParents.indexOf(".html");if(beforeHtml==-1){ts_mainText=urlParents;}else{ts_mainText=urlParents.substring(0, beforeHtml);}}else{var urlParents=ts_href.substr(ts_stIndexOf('/', ts_stIndexOf('/') - 1) + 1);var beforeHtml = urlParents.indexOf(".html");if(beforeHtml==-1){ts_mainText=urlParents;}else{ts_mainText=urlParents.substring(0, beforeHtml);}}return ts_mainText;}。

Nodejs中搭建一个静态Web服务器,通过读取文件获取响应类型

Nodejs中搭建一个静态Web服务器,通过读取文件获取响应类型

Nodejs中搭建⼀个静态Web服务器,通过读取⽂件获取响应类型场景Web服务器⼀般指⽹站服务器，是指驻留于因特⽹上某种类型计算机的程序，可以向浏览器等Web客户端提供⽂档，也可以放置⽹站⽂件让全世界浏览，还可以放置数据⽂件，让全世界下载。

⽬前最主流的Web服务器有Apache、Nginx、Its等。

Nodejs中的fs模块的使⽤：Node中的Http模块和Url模块的使⽤：怎样使⽤Node搭建⼀个静态资源服务器，使其根据请求不同的⽂件类型设置不同的响应头。

⽐如：".png":"image/png" ,".png":"image/png" ,".zip":"application/zip" ,".htm":"text/html" ,".html":"text/html" ,".css":"text/css" ,".js":"application/x-javascript" ,注：实现要实现搭建⼀个静态资源服务器，⾸先要拦截每个请求，根据请求的url的⽂件后缀名格式进⾏对应的响应头设置。

⽐如请求html⽂件，就要设置响应头为{'Content-Type': 'text/html';charset="utf-8"'}要是请求js⽂件，响应头为{'Content-Type': 'text/javascript';charset="utf-8"'}如果是请求压缩包zip⽂件，则响应头为{'Content-Type': 'application/zip';charset="utf-8"'}所以将这些不同后缀名格式的⽂件的请求映射为不同的响应头就能搭建⼀个静态资源服务器。

URL获取方法范文

URL获取方法范文

URL获取方法范文在网络中，URL（Uniform Resource Locator）是一种用来唯一标识网络资源的字符串。

它可以用来定位和访问网络上的各种资源，如网页、图片、文件等。

获取URL是指通过其中一种方式获取和解析URL地址的操作。

本文将介绍几种获取URL的方法。

一、从浏览器地址栏获取URL最常见的获取URL的方法就是从浏览器的地址栏中复制URL地址。

当我们访问网页时，浏览器会将网页的URL显示在地址栏中，我们只需要复制地址栏中的URL即可。

二、从网页源代码获取URL有时我们想获取网页中一些资源的URL，可以通过查看网页源代码来获取。

在浏览器中，我们可以通过右键点击网页，选择“查看页面源代码”或者“检查元素”选项来打开开发者工具，然后在源代码中查找相应资源的URL。

三、使用网络抓包工具获取URL网络抓包工具可以用来监控和捕获网络数据包，并可以提取其中的URL地址。

常用的网络抓包工具包括Fiddler、Wireshark等。

这些工具可以在电脑上安装并运行，当我们访问网络资源时，它们会捕获到相应的数据包，然后可以在工具中查看和提取其中的URL地址。

四、使用编程语言获取URL我们可以使用编程语言来编写程序，通过程序来获取URL地址。

不同的编程语言提供了不同的方法和库来进行URL的获取和解析。

下面以Python语言为例，介绍如何使用编程语言获取URL。

Python提供了urllib库来处理URL相关的操作。

我们可以使用urllib库中的urlopen(函数来打开一个URL链接，并获取相应的内容。

以下是一个使用Python获取URL的示例代码：```pythonimport urllib.requestresponse = urllib.request.urlopen(url)#获取URL的内容content = response.read(.decodeprint(content)```以上代码中，首先我们导入了urllib.request库，然后指定需要获取的URL地址，并使用urlopen(函数打开URL链接，得到一个response 对象。

php 获取url参数方法

php 获取url参数方法

php 获取url参数方法在PHP中，获取URL参数的方法非常简单，主要是通过解析URL字符串中的查询字符串（？号后面的部分）来实现。

以下将分为四个部分进行详细介绍，包括基本方法、实例演示、高级用法以及总结与建议。

一、PHP获取URL参数的基本方法要获取URL参数，首先需要了解URL的结构。

一个典型的URL结构如下：```scheme://hostname/path?query_string```其中，`query_string`就是我们需要解析的部分。

在PHP中，可以使用`parse_str()`函数对URL查询字符串进行解析。

例如，对于URL`/index.php?name=John&age=30`，可以使用以下代码获取参数：```php$name = $_GET["name"];$age = $_GET["age"];```二、获取URL参数的实例演示下面通过一个简单的实例来演示如何获取URL参数，并展示如何将获取到的参数用于其他操作。

```php<?php// 示例：获取URL参数并输出if (isset($_GET["name"])) {$name = $_GET["name"];echo "姓名：" .$name ."<br>";} else {echo "未获取到姓名参数。

";}if (isset($_GET["age"])) {$age = $_GET["age"];echo "年龄：" .$age ."<br>";} else {echo "未获取到年龄参数。

";}>```三、获取URL参数的高级用法在某些情况下，可能需要对URL参数进行更复杂的处理，例如处理多维数组参数、限制参数值的范围等。

js 获取get请求带的参数

随着互联网技术的不断发展，前端开发也日新月异。

在前端开发中，JavaScript（简称JS）作为一种广泛应用的脚本语言，被用于处理网页交互和数据传输等多种功能。

其中，获取Get请求中携带的参数是前端开发中的一个基本需求。

本文将介绍如何使用JavaScript获取Get请求中携带的参数，以及相关的注意事项和最佳实践。

一、概述在HTTP协议中，Get请求是最常见的一种请求方式。

在前端开发中，我们经常需要从Get请求中获取参数，以便进行相应的处理。

我们可能需要从URL中获取用户ID或者其它参数，然后根据这些参数从后端获取相应的数据进行展示或者其他操作。

而JavaScript正是我们常用的一种工具，可以帮助我们实现这个目标。

二、获取URL参数的方法在JavaScript中，我们可以使用多种方法来获取Get请求中携带的参数。

以下是一些常用的方法：1. 使用window.location.search属性window.location对象包含了当前 URL 的信息。

我们可以通过window.location.search属性来获取 URL 中的查询字符串部分，即"?"之后的内容。

如果当前页面的 URL 是xxx，那么window.location.search的值将是"?id=123name=test"。

我们可以进一步解析这个字符串，从而获取其中携带的参数。

2. 使用URLSearchParams对象URLSearchParams是一个内置的类，可以帮助我们解析和操作 URL查询字符串。

我们可以使用URLSearchParams对象的实例方法来获取参数的值。

我们可以通过调用get()方法来获取特定参数的值，或者通过调用entries()方法来遍历所有的参数和其对应的值。

3. 自定义函数解析URL除了使用内置的API之外，我们也可以编写自定义的函数来解析URL，并获取其中的参数。

Go语言开发：在HTML模板中引入js及其他静态文件

Go语言开发：在HTML模板中引入js及其他静态文件问题：用go语言开发，在html页面中，引入js文件无效，写在js文件中的函数无法调用，也没有报错；js代码直接写html页面中，可以调用，但是看起来太乱了，不舒服。

这个问题困扰了好久，在网上搜了好多资料都无法解决问题，今天终于解决了，TND，看到答案的时候，原来这么简单。

参考文章Go语言引用css和js文件go的template模板怎么才能引入css和js等静态文件？致敬原创，为上面的两位作者点赞。

网上的文章太多千篇一律，很多都是抄的，不解决问题。

我的问题：在写一个小项目的过程中，在html网页中直接写js代码，是有效的，但是将js代码单独放到js文件中就无效了，无法调用其中的函数，目录大概是这样sszxr:blog sszxr$ tree.├── gomod│ ├── accesscontrol.go│ ├── app.go│ ├── login.go│ ├── register.go│ └── session.go├── main.go├── models│ ├── article.go│ ├── homepage.go│ └── user.go├── static│ ├── css│ │ └── login.css│ └── js│ ├── blog.js│ ├── lib│ │ ├── jquery-3.3.1.min.js│ │ └── jquery.url.js│ └── reload.min.js├── template│ ├── accountset.html│ ├── login.html│ ├── register.html├── utils│ ├── myUtils.go│ └── mysqlUtil.go└── validator └── regexp.go•1•2•3•4•5•6•7•8•9•10•11•12•13•14•15•16•17•18•19•20•21•22•23•24•25•26•27•28•29•30•31在html页面中是这样引用的<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>博客账号- 登录</title> <scriptsrc='../static/js/lib/jquery-3.3.1.min.js'></script> <script src='../static/js/lib/jquery.url.js'></script> <script src='../static/js/blog.js'></script></head><bodystyle='background-image:url(/%E5%8D%D%89.jpg); background-size: cover;background-color: rgba(214,210,207,0.45)'><div style='width:100%;height: 600px'></div>•1•2•3•4•5•6•7•8•9•10•11•12看了网上的好多攻略，主要因为是Go语言的问题，Go语言太不火了，好多问题都搜不到答案，网上搜到的答案基本都不能解决问题。

网页自动跳转HTML、PHP、.NET、JSP等代码大全

从搜索引擎优化的角度出发，一般不希望自动转向有延迟。不过，如果是用Meta Refresh标识进行转向，一定要注意把延迟时间设定成至少10秒以上。
“javascript”自动转向法
由于不能解析javascript，所以搜索引擎无法察觉(自动检测到)用javascript脚本进行的自动转向。javascript自动重定向脚本可以放在网页的任何位置上，如果要求立即跳转，则可以将其放入网页源码的<head>区内的最上面。用javascript实现跳转的范例如下：
<script>
t = -1; //计数器
setInterval("testTime()",1000); //启动1秒定时
function testTime() {
if(t<0) return; //计数器值小于0，表示尚未开始倒计时
if(t == 0) //计数器值为0，转向
location = "";
view.innerHTML = "<b>"+t+"</b>"; //显示倒计时
t--; //计数器递减
}
function offTime() {
if(event.srcElement.value != "点击开始") { //若不是倒计时开始
t = -1; //初始计数器
view.innerHTML = ""; //清空倒计时
Meta Refresh Tag自动转向法
由于搜索引擎能够读取HTML，而Meta tags也是HTML，所以对于这种自动转向法，搜索引擎能够自动检测出来。因而无论网站的转向出于什么目的，都很容易被搜索引擎视做对读者的误导而受到惩罚。不过，如果跳转延迟时间设置合适，搜索引擎就不会视之为作弊。

html静态页面实现微信分享思路

html静态页⾯实现微信分享思路微信分享⽹页的时候，希望分享出来的链接是标题+描述+缩略图，微信开发代码⽰例⾥已提供了⽅法，但只适⽤于动态页⾯。

由于dedecms是⽣成了静态⽂件，其实我想使⽤ajax获取jssdk参数也能也能实现微信分享功能了，在这⾥分享给⼤家。

jssdk的步骤业务流程是这样滴：1：在微信公众号后台配置js 安全域名，即需要引⼊jssdk的页⾯域名。

需要在域名根⽬录下放置微信的检测⽂件。

2：配置出ip⽩名单（可参考:3：后台开发⼈员⽣成签名传递给前台4：前端页⾯引⼊script⽅式 jssdk⽂件5：通过ajax获取config 配置，完成config 配置后即可使⽤jssdk的各项功能了。

再补充啰嗦⼀句：确保你获取⽤来签名的url是动态获取的，动态页⾯可参见实例代码中php的实现⽅式。

如果是html的静态页⾯在前端通过ajax将url传到后台签名，前端需要⽤js获取当前页⾯除去'#'hash部分的链接（可⽤location.href.split('#')[0]获取,⽽且需要encodeURIComponent，后台decodeURIComponent解码），因为页⾯⼀旦分享，微信客户端会在你的链接末尾加⼊其它参数，如果不是动态获取当前链接，将导致分享后的页⾯签名失败。

前台HTML代码⽰例：<script src="http://外部站点引⼊/js/jquery-1.11.1.min.js"></script><script src="/open/js/jweixin-1.0.0.js"></script><script>var url=encodeURIComponent(window.location.href.split('#')[0]);//分享成功之后再次分享，微信会再url附带额外参数造成⼆次分享签名错误，这⾥处理下避免config：invalid signature签名失效$.ajax({type : "get",url : "http://xxx/jssdk.php?url="+url,//替换⽹址，xxx根据⾃⼰jssdk⽂件位置修改dataType : "jsonp",jsonp: "callback",jsonpCallback:"success_jsonpCallback",success : function(data){wx.config({ debug: true, // 开启调试模式,调⽤的所有api的返回值会在客户端alert出来，若要查看传⼊的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: [ "onMenuShareTimeline", //分享给好友 "onMenuShareAppMessage", //分享到朋友圈 "onMenuShareQQ", //分享到QQ "onMenuShareWeibo" //分享到微博]});},error:function(data){ alert(JSON.stringify(data));//alert("连接失败！");}});wx.ready(function (){var shareData = {title: '标题',desc: '简介',//这⾥请特别注意是要去除htmllink: '链接',imgUrl: '标题图'};wx.onMenuShareAppMessage(shareData);wx.onMenuShareTimeline(shareData);wx.onMenuShareQQ(shareData);wx.onMenuShareWeibo(shareData);});</script>修改服务端⽂件jssdk.php<?php$url = urldecode($_GET['url']);class JSSDK {private $appId;private $appSecret;private $url;public function __construct($appId, $appSecret,$url) {$this->appId = $appId;$this->appSecret = $appSecret; $this->url = $url;}public function getSignPackage() {$jsapiTicket = $this->getJsApiTicket();$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";// $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; $url =$this->url;$timestamp = time();$nonceStr = $this->createNonceStr();// 这⾥参数的顺序要按照 key 值 ASCII 码升序排序$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";$signature = sha1($string);$signPackage = array("appId" => $this->appId,"nonceStr" => $nonceStr,"timestamp" => $timestamp,"url" => $url,"signature" => $signature,"rawString" => $string);return $signPackage;}private function createNonceStr($length = 16) {$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";$str = "";for ($i = 0; $i < $length; $i++) {$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);}return $str;}private function getJsApiTicket() {// jsapi_ticket 应该全局存储与更新，以下代码以写⼊到⽂件中做⽰例$data = json_decode(file_get_contents("jsapi_ticket.json"));if ($data->expire_time < time()) {$accessToken = $this->getAccessToken();// 如果是企业号⽤以下 URL 获取 ticket// $url = "https:///cgi-bin/get_jsapi_ticket?access_token=$accessToken";$url = "https:///cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";$res = json_decode($this->httpGet($url));$ticket = $res->ticket;if ($ticket) {$data->expire_time = time() + 7000;$data->jsapi_ticket = $ticket;$fp = fopen("jsapi_ticket.json", "w");fwrite($fp, json_encode($data));fclose($fp);}} else {$ticket = $data->jsapi_ticket;}return $ticket;}private function getAccessToken() {// access_token 应该全局存储与更新，以下代码以写⼊到⽂件中做⽰例$data = json_decode(file_get_contents("access_token.json"));if ($data->expire_time < time()) {// 如果是企业号⽤以下URL获取access_token// $url = "https:///cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";$url = "https:///cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";$res = json_decode($this->httpGet($url));$access_token = $res->access_token;if ($access_token) {$data->expire_time = time() + 7000;$data->access_token = $access_token;$fp = fopen("access_token.json", "w");fwrite($fp, json_encode($data));fclose($fp);}} else {$access_token = $data->access_token;}return $access_token;}private function httpGet($url) {$curl = curl_init();curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);curl_setopt($curl, CURLOPT_TIMEOUT, 500);curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);curl_setopt($curl, CURLOPT_URL, $url);$res = curl_exec($curl);curl_close($curl);return $res;}}$jssdk = new JSSDK("公众号ID", "公众号密钥",$url);//按照⾃⼰的公众号填写$signPackage = $jssdk->GetSignPackage();$tmp=json_encode(array ('appId'=>$signPackage["appId"],'timestamp'=>$signPackage["timestamp"],'nonceStr'=>$signPackage["nonceStr"],'signature'=>$signPackage["signature"],'url'=>$signPackage["url"])); $callback = $_GET['callback'];echo $callback.'('.$tmp.')';exit;?>其它的按照动态页⾯参数设置即可。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。