前端在html页面之间传递参数的方法_html/css

Table des matières

1、通过form表单传递参数

2、通过window.location.href

3、通过window.location.open

Maison

interface Web

tutoriel HTML

前端在html页面之间传递参数的方法_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:23 AM

项目中经常会出现的一种情况，有一个列表，譬如是案例列表，点击列表中的某一项，跳转至详情页面。详情是根据所点击的某条记录生成的，因为案例和具体的详情页面，都是用户后期自行添加的，我们开始编写时，不可能穷尽。因此跳转页面时，我们需要传递一个参数过去，这样我们才能通过这个参数进行数据请求，然后根据后台返回的数据来生成页面。因此，通过a标签跳转的方式，肯定是行不通的。
我们经常写form表单，提交时，可以传递参数，如果使用表单，并将其隐藏起来，应该可以达到效果。
除此以外，window.location.href和window.open也可以达到效果。

1、通过form表单传递参数

<html lang="en"> <head>  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="Keywords" content="关键词一，关键词二"> <meta name="Description" content="网站描述内容"> <meta name="Author" content="Yvette Lau"> <title>Document</title>   <link rel="stylesheet" href=""/> <script type = "text/javascript" src = "jquery-1.11.2.min.js"></script> </head> <body> <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;"> <input type="hidden" name="hid" value = "" index = "lemon"> <img class = "more" src = "main_jpg10.png" / alt="前端在html页面之间传递参数的方法_html/css_WEB-ITnose" > <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/> </form> <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;"> <input type="hidden" name="hid" value = "" index = "aaa"> <img class = "more" src = "main_jpg10.png" / alt="前端在html页面之间传递参数的方法_html/css_WEB-ITnose" > <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/> </form> <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;"> <input type="hidden" name="hid" value = "" index = "bbb"> <img class = "more" src = "main_jpg10.png" / alt="前端在html页面之间传递参数的方法_html/css_WEB-ITnose" > <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/> </form> </body></html><script> function foo(){ var frm = window.event.srcElement; frm.hid.value = $(frm.hid).attr("index"); return true; }</script>

Copier après la connexion

点击图片时，跳转至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.
继续上面的例子：

1	`<script>` `var` `index =` `"lemon";` `var` `url =` `"receive.html?index="+index; $("#more").click(function(){ window.open(url) });</script>`

Copier après la connexion

这样在点击的时候，就会打开一个新页面，页面的url地址与上面相同。
由于浏览器的安全限制，有些浏览器在弹出窗口配置方面增加限制，大多数浏览器都内置有弹出窗口的屏蔽程序，因此，弹出窗口有可能被屏蔽，在弹出窗口被屏蔽时，需要考虑两种可能性，一种是浏览器内置的屏蔽程序阻止弹出窗口，那么 window.open()很可能返回Null，此时，只要监测这个返回的值就可以确定弹出窗口是否被屏蔽。

1	`var` `newWin = window.open(url);if(newWin == null){ alert("弹窗被阻止");}`

Copier après la connexion

另一种是浏览器扩展或其他程序阻止的弹出窗口，那么window.open()通常会抛出一个错误，因此，要像准确的检测弹出窗口是否被屏蔽，必须在检测返回值的同时，将window.open()封装在try-catch块中，上面的例子中可以写成如下形式：

1	`<script>` `var` `blocked = false;` `try{` `var` `index =` `"lemon";` `var` `url =` `"receive.html?index="+index; $("#more").click(function(){` `var` `newWin = window.open(url);` `if(newWin == null){ blocked = true; } }); }` `catch(ex){ block = true; }` `if(blocked){ alert("弹出窗口被阻止"); }</script>`

Copier après la connexion

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Will R.E.P.O. Vous avez un jeu croisé?

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7549

Tutoriel CakePHP

1382

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

See all articles