前端在html页⾯之间传递参数的⽅法
项⽬中经常会出现的⼀种情况，有⼀个列表，譬如是案例列表，点击列表中的某⼀项，跳转⾄详情页⾯。详情是根据所点击的某条记录⽣成的，因为案例和具体的详情页⾯，都是⽤户后期⾃⾏添加的，我们开始编写时，不可能穷尽。因此跳转页⾯时，我们需要传递⼀个参数过去，这样我们才能通过这个参数进⾏数据请求，然后根据后台返回的数据来⽣成页⾯。因此，通过a标签跳转的⽅式，肯定是⾏不通的。 我们经常写form表单，提交时，可以传递参数，如果使⽤表单，并将其隐藏起来，应该可以达到效果。
除此以外，window.location.href和window.open也可以达到效果。
1、通过form表单传递参数
<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">lang</span>= <span class="hljs-value">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-comment"><!--⽹站编码格式，UTF-8 国际编码，GBK或 gb2312 中⽂编码--></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-
value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html;charset=utf-8"</span> /></span> <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-
value">"Keywords"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"关键词⼀，关键词⼆"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-
value">"Description"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"⽹站描述内容"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-
value">"Author"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"Yve
tte Lau"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span>Document<span class="hljs-tag"></<span class="hljs-
title">title</span>></span>
<span class="hljs-comment"><!--css js ⽂件的引⼊--></span>
<span class="hljs-comment"><!-- <link rel="shortcut icon" href="images/favicon.ico"> --></span>
<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"
</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>/></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span> = "<span class="hljs-
attribute">text</span>/<span class="hljs-attribute">javascript</span>" <span class="hljs-attribute">src</span> = "<span class="hljs-
attribute">jquery-1.11.2.min.js</span>"></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-
title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">form</span> <span class="hljs-attribute">name</span> = "<span class="hljs-
attribute">frm</span>" <span class="hljs-attribute">method</span> = "<span class="hljs-attribute">get</span>" <span class="hljs-
attribute">action</span> = "<span class="hljs-attribute">receive.html</span>" <span class="hljs-attribute">onsubmit</span> = "<span
class="hljs-attribute">return</span> <span class="hljs-attribute">foo</span>()" <span class="hljs-attribute">style</span> = "<span class="hljs-attribute">position:relative</span>;"></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-
value">"hidden"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"hid"</span> <span class="hljs-
attribute">value</span> = "" <span class="hljs-attribute">index</span> = "<span class="hljs-attribute">lemon</span>"></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">class</span> = "<span class="hljs-
attribute">more</span>" <span class="hljs-attribute">src</span> = "<span class="hljs-attribute">main_jpg10.png</span>" /></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span> = "<span class="hljs-
attribute">submit</span>" <span class="hljs-attribute">style</span> = "<span class="hljs-attribute">position:absolute</span>;<span class="hljs-attribute">left:10px</span>;<span class="hljs-
attribute">top:0px</span>;<span class="hljs-attribute">width:120px</span>;<span class="hljs-attribute">height:40px</span>;<span class="hljs-attribute">opacity:0</span>;<span class="hljs-attribute">cursor:pointer</span>;"/></span>
<span class="hljs-tag"></<span class="hljs-title">form</span>></span>
<span class="hljs-tag"><<span class="hljs-title">form</span> <span class="hljs-attribute">name</span> = "<span class="hljs-
attribute">frm</span>" <span class="hljs-attribute">method</span> = "<span class="hljs-attribute">get</span>" <span class="hljs-
attribute">action</span> = "<span class="hljs-attribute">receive.html</span>" <span class="hljs-attribute">onsubmit</span> = "<span
class="hljs-attribute">return</span> <span class="hljs-attribute">foo</span>()" <span class="hljs-attribute">style</span> = "<span class="hljs-attribute">position:relative</span>;"></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-
value">"hidden"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"hid"</span> <span class="hljs-
attribute">value</span> = "" <span class="hljs-attribute">index</span> = "<span class="hljs-attribute">aaa</span>"></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">class</span> = "<span class="hljs-
attribute">more</span>" <span class="hljs-attribute">src</span> = "<span class="hljs-attribute">main_jpg10.png</span>" /></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span> = "<span class="hljs-
attribute">submit</span>" <span class="hljs-attribute">style</span> = "<span class="hljs-attribute">position:absolute</span>;<span class="hljs-attribute">left:10px</span>;<span class="hljs-attribute">top:0px</span>;<span class="hljs-attribute">width:120px</span>;<span class="hljs-attribute">height:40px</span>;<span class="hljs-attribute">opacity:0</span>;<span class="hljs-attribute">cursor:pointer</span>;"/></span>
<span class="hljs-tag"></<span class="hljs-title">form</span>></span>
<span class="hljs-tag"></<span class="hljs-title">form</span>></span>
<span class="hljs-tag"><<span class="hljs-title">form</span> <span class="hljs-attribute">name</span> = "<span class="hljs-
attribute">frm</span>" <span class="hljs-attribute">method</span> = "<span class="hljs-attribute">get</span>" <span class="hljs-
attribute">action</span> = "<span class="hljs-attribute">receive.html</span>" <span class="hljs-attribute">onsubmit</span> = "<span
class="hljs-attribute">return</span> <span class="hljs-attribute">foo</span>()" <span class="hljs-attribute">style</span> = "<span class="hljs-attribute">position:relative</span>;"></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-
value">"hidden"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"hid"</span> <span class="hljs-
attribute">value</span> = "" <span class="hljs-attribute">index</span> = "<span class="hljs-attribute">bbb</span>"></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">class</span> = "<span class="hljs-
attribute">more</span>" <span class="hljs-attribute">src</span> = "<span class="hljs-attribute">main_jpg10.png</span>" /></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span> = "<span class="hljs-
attribute">submit</span>" <span class="hljs-attribute">style</span> = "<span class="hljs-attribute">position:absolute</span>;<span class="hljs-attribute">left:10px</span>;<span class="hljs-attribute">top:0px</span>;<span class="hljs-attribute">width:120px</span>;<span class="hljs-attribute">height:40px</span>;<span class="hljs-attribute">opacity:0</span>;<span class="hljs-attribute">cursor:pointer</span>;"/></span> <span class="hljs-tag"></<span class="hljs-title">form</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span>
html span 居中<span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span><span class="hljs-params">() </span>{</span>
<span class="hljs-keyword">var</span> frm = window.event.srcElement;
frm.hid.value = $(frm.hid).attr(<span class="hljs-string">"index"</span>);
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
}
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code><ul class="pre-numbering">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li> <li>16</li><li>17</li><li>18</li><li>19</li><li>20
</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li> <li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li></ul>
点击图⽚时，跳转⾄receive.html页⾯。页⾯的url变成：
我们想要传的字符串已经传递了过来。
然后再对当前的url进⾏字符串分割
window.location.href.split(“=”)[1]//得到lemon
我们拿到需要传来的参数之后，就可以根据这个进⾏下⼀步的处理了。
除了上述通过字符串分割来获取url传递的参数外，我们还可以通过正则匹配和window.location.search⽅法来获取。
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变为：
然后我们再⽤上⾯的⽅法提取⾃⼰需要的参数
3、通过window.location.open
如果是希望打开⼀个新页⾯，⽽不是改变当前的页⾯，那么window.location.href就不适⽤了，此时，我们需要借助于
window.location.open()来实现
简单介绍有⼀下window.open()函数，window.open()有三个参数，第⼀个参数是要打开的页⾯的url，第⼆个参数是窗⼝⽬标，第三个参数是⼀个特定字符串以及⼀个表⽰新页⾯是否取代浏览器历史集中
当前加载页⾯的布尔值，通过只需要传递第⼀个参数。第⼆个参数还可以是”_blank”,”_self”,”_parent”,”_top”这样的特殊窗⼝名称，”_blank”打开新窗⼝,”_self”实现的效果同
window.location.href.
继续上⾯的例⼦：
<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
<span class="hljs-keyword">var</span> index = <span class="hljs-string">"lemon"</span>;
<span class="hljs-keyword">var</span> url = <span class="hljs-string">"receive.html?index="</span>+index;
$(<span class="hljs-string">"#more"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
window.open(url)
});
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code><ul class="pre-numbering">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
这样在点击的时候，就会打开⼀个新页⾯，页⾯的url地址与上⾯相同。
由于浏览器的安全限制，有些浏览器在弹出窗⼝配置⽅⾯增加限制，⼤多数浏览器都内置有弹出窗⼝的屏蔽程序，因此，弹出窗⼝有可能被屏蔽，在弹出窗⼝被屏蔽时，需要考虑两种可能性，⼀种是浏览器内置的屏蔽程序阻⽌弹出窗⼝，那么 window.open()很可能返回Null，此时，只要监测这个返回的值就可以确定弹出窗⼝是否被屏蔽。
<code class="hljs coffeescript has-numbering"><span class="hljs-reserved">var</span> newWin = <span class="hljs-
built_in">window</span>.open(url);
<span class="hljs-keyword">if</span>(newWin == <span class="hljs-literal">null</span>){
alert(<span class="hljs-string">"弹窗被阻⽌"</span>);
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
另⼀种是浏览器扩展或其他程序阻⽌的弹出窗⼝，那么window.open()通常会抛出⼀个错误，因此，要像准确的检测弹出窗⼝是否被屏蔽，必须在检测返回值的同时，将window.open()封装在try-catch块中，上⾯的例⼦中可以写成如下形式：
<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
<span class="hljs-keyword">var</span> blocked = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">try</span>{
<span class="hljs-keyword">var</span> index = <span class="hljs-string">"lemon"</span>;
<span class="hljs-keyword">var</span> url = <span class="hljs-string">"receive.html?index="</span>+index;
$(<span class="hljs-string">"#more"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span
class="hljs-params">()</span>{</span>
<span class="hljs-keyword">var</span> newWin = window.open(url);
<span class="hljs-keyword">if</span>(newWin == <span class="hljs-literal">null</span>){
blocked = <span class="hljs-literal">true</span>;
}
});
} <span class="hljs-keyword">catch</span>(ex){
block = <span class="hljs-literal">true</span>;
}
<span class="hljs-keyword">if</span>(blocked){
alert(<span class="hljs-string">"弹出窗⼝被阻⽌"</span>);
}
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code><ul class="pre-numbering">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li> <li>16</li><li>17</li><li>18</li></ul>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论