html后#号的作用,及html如何传参_随笔

#号的作用

1. #

一、#的涵义

#代表网页中的一个位置。其右面的字符，就是该位置的标识符。为网页位置指定标识符，有两个方法。一是使用锚点，二是使用id属性。

二、HTTP请求不包括#

#是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包括#。

三、#后的字符

在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。

四、改变#不触发网页重载

单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。

五、改变#会改变浏览器的访问历史

每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。这对于ajax应用程序特别有用，可以用不同的#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。值得注意的是，上述规则对IE

6和IE 7不成立，它们不会因为#的改变而增加历史记录。

六、window.location.hash读取#值

window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变写入时，则会在不重载网页的前提下，创造一条访问历史记录。

七、onhashchange事件

这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari

4.0+支持该事件。

使用方法有三种：

window.onhashchange = func

window.addEventListener("hashchange"， func, false)

对于不支持onhashchange的浏览器，可以用setInterval监控location.hash的变化。

八、Google抓取#的机制

默认情况下，Google的网络蜘蛛忽视URL的#部分。

但是，Google还规定，如果你希望Ajax生成的内容被浏览引擎读取，那么URL中可以使用"#!"，Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。

通过这种机制，Google就可以索引动态的Ajax内容。

注

AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。AJAX 是一种用于创建快速动态网页的技术。

html如何传参

1、通过form表单传递参数

<head>

<title>Document</title>

</head>

<body>

</form>

</form>

</form>

</body></html><script>

function foo(){

var frm = window.event.srcElement

frm.hid.value = $(frm.hid).attr("index")

return true

}</script>

点击图片时，跳转至receive.html页面。页面的url变成：

想要传的字符串已经传递了过来。

然后再对当前的url进行字符串分割

window.location.href.split(“=”)[1]//得到lemon

拿到需要传来的参数之后，就可以根据这个进行下一步的处理了。

2、通过window.location.href

譬如点击某个列表，需要传递一个字符串到detail.html页面，然后detail.html页面根据传来的值，通过ajax交互数据，加载页面的内容。

var index = "lemon"var url = "receive.html?index="+index$("#more").click(function(){ window.location.href = url})

当前页面会被替换成recieve.html的页面，页面的url变为：

然后再用上面的方法提取需要的参数。

一.通过表单简单的传输数据，利用js代码接收传递的数据，注意method属性要设为get。<form id="form" action="data.html" method="get"></form>//action的值是你的目的html在你的目的html中可通过url接收传递的数据，并将数据保存在一个对象中。<script type="text/javascript" charset="utf-8"> window.onload = function() {var url = window.location.search//location.search是从当前URL的?号开始的字符串console.log(url) var Request = new Object() if (url.indexOf('?') != -1) {var a = '' var str = url.substr(1)　 //去掉?号strs = str.split('&') for (var i = 0i <strs.lengthi++) {a = strs[i].split('=')[0]；Request[a] = decodeURI(strs[i].split('=')[1])//解码,生成获取信息的对象console.log(Request[a]) }}console.log(Request)123456789101112131415161718注意这种方式传递中文数据需要用decodeURIComponent()或decodeURL（）函数解码，unescape（）现在似乎已经淘汰了。然后利用document.write()或innerHTML等方法或函数将数据显示在网页上。此种方法适合自己平时写JS的小练习，此种方法无法将数据保存下来。2.使用Cookie传递参数下面是简单的实例，a页面保存Cookie，b页面读取。a.html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>a</title> <script type="text/javascript"> /*** * @param {string} cookieName Cookie名称 * @param {string} cookieValue Cookie值 */function SetCookie(cookieName,cookieValue) {/*设置Cookie值*/document.cookie = cookieName + "=" + escape(cookieValue)}function login() {var username = $("user").value if(username.length>0 &&username) {SetCookie("username", username) /*跳转到b.html页面*/document.location = "b.html" }}function $(id) {return document.getElementById(id) }</script></head><body><div id="main"> <div><span>请输入你的名字</span><input type="text" id="user" /></div> <div> <input type="button" onclick="login()" value="提交" /> </div></div></body></html>123456789101112131415161718192021222324252627282930313233343536b.html<html><head> <meta charset="UTF-8"> <title>b</title> <script type="text/javascript"> /*** *读取指定的Cookie值 *@param {string} cookieName Cookie名称 */function ReadCookie(cookie_name){//判断是否存在cookieif (document.cookie.length >0){//查询cookie开始部分cookie_start = document.cookie.indexOf(cookie_name + "=")//如果存在if (cookie_start != -1){//计算结束部分cookie_start = cookie_start + cookie_name.length + 1cookie_end = document.cookie.indexOf("", cookie_start)//如果已经是最后一个cookie值，则取cookie长度if (cookie_end == -1) {cookie_end = document.cookie.length}//获取cookie值，unescape对特殊字符解密return unescape(document.cookie.substring(cookie_start,cookie_end))}}//其它情况返回空return ""}function $(id) {return document.getElementById(id) }function init() {var username = ReadCookie("username") if(username &&username.length>0) {$("msg").innerHTML = "<h1>欢迎光临," + username + "!</h1>" } else {$("msg").innerHTML = "<a href='a.htm'>请录入名字</a>" }}</script></head><body onload="init()"><div id="msg"></div></body></html>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950此种方法也是适合自己平时写JS的小练习，此种方法无法将数据保存下来。3.通过web服务器利用前后端交互前后端交互又可分为表单交互和url参数交互。表单交互是指在HTML中创建一个表单，用户填写表单后提交给服务器，服务器收到表单后返回处理结果。其大致构成如下：URL参数经常用于浏览器向服务器提交一些请求信息。其流程图大致如下：例如利用nodejs与json文件相连接，实现对本地json数据的增删改查，在不同网页间传递数据。————————————————版权声明：本文为CSDN博主「想躺」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_41209003/article/details/103739371

html是静态页面，可以使用url链接传值，比如a.html和b.html两个页面

a.html中有一个链接

可以使用到js，如下：

a.htm:

</form>

b.htm

<html>

<body>

function getArgs() {

var args = {}

var query = location.search.substring(1)

// Get query string

var pairs = query.split("&")

// Break at ampersand

for(var i = 0 i < pairs.length i++) {

var pos = pairs[i].indexOf('=')

// Look for "name=value"

if (pos == -1) continue

// If not found, skip

var argname = pairs[i].substring(0,pos)// Extract the name

var value = pairs[i].substring(pos+1)// Extract the value

value = decodeURIComponent(value)// Decode it, if needed

args[argname] = value

// Store as a property

}

return args// Return the object

}

var str =getArgs()

alert(str['q'])//和input的name对应取值,

document.getElementById("qbox").innerHTML = str['q']//然后赋值给DIV

</script>

</body>

</html>

希望能帮到你哦！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6135655.html

html后#号的作用,及html如何传参

发表评论

评论列表（0条）