Une situation qui se produit souvent dans les projets est qu'il existe une liste, telle qu'une liste de cas, et qu'en cliquant sur un élément de la liste, vous accéderez à la page de détails. Les détails sont générés sur la base d'un enregistrement cliqué, car les cas et les pages de détails spécifiques sont ajoutés ultérieurement par les utilisateurs. Lorsque nous commençons à écrire, il est impossible de tous les épuiser. Par conséquent, lorsque nous accédons à la page, nous devons transmettre un paramètre afin de pouvoir faire une demande de données via ce paramètre, puis générer la page en fonction des données renvoyées par l'arrière-plan. Par conséquent, sauter à travers la balise a ne fonctionnera certainement pas.
Nous écrivons souvent des formulaires. Lors de la soumission, nous pouvons transmettre des paramètres si nous utilisons le formulaire et le masquons, l'effet devrait être obtenu.
De plus, window.location.href et window.open peuvent également obtenir cet effet.
1. Transmettez les paramètres via le formulaire <html lang=en> <head> <!--Format d'encodage du site Web, encodage international UTF-8, encodage chinois GBK ou gb2312--> <meta http-equiv=content-type content=text/html;charset=utf- 8 /> <meta name=Keywords content=Keywords one, Keywords two> <meta name=Description content=Website description content> <meta name=Author content=Yvette Lau> <title>Document</title> <!--Introduction du fichier css js--> <!-- <link rel=shortcut icon href=images/favicon.ico> --> <link rel=stylesheet href=/> <script type = text/javascript src = jquery-1.11.2.min.js></script> </head> <body> <nom du formulaire = méthode frm = get action = recevoir.html onsubmit = return foo() style = position:relative;> <input type=hidden name=hid value = index = lemon> <img class = more src = main_jpg10.png /> <input type = submit style = position:absolute; gauche : 10 px ; haut : 0 px ; largeur : 120 px ; hauteur : 40 px ; opacité : 0 ; curseur : pointeur ;/> </form> <nom du formulaire = méthode frm = get action = recevoir.html onsubmit = return foo() style = position:relative;> <input type=hidden name=hid value = index = aaa> <img class = more src = main_jpg10.png /> <type d'entrée = style de soumission = position:absolute;gauche:10px;haut:0px;largeur:120px;hauteur:40px;opacité:0;curseur:pointeur;/> </form> <nom du formulaire = méthode frm = get action = recevoir.html onsubmit = return foo() style = position:relative;> <input type=hidden name=hid value = index = bbb> <img class = more src = main_jpg10.png /> <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).attr(index); return true;Lorsque vous cliquez sur l’image, vous accédez à la page recevoir.html. L'url de la page devient :
La chaîne que nous voulons transmettre a été transmise.
Effectuez ensuite le fractionnement des chaînes sur l'URL actuelle
window.location.href.split(=)[1]//Obtenir du citron
Une fois que nous avons obtenu les paramètres qui doivent être transmis, nous pouvons passer à l'étape suivante sur cette base.
En plus du fractionnement de chaîne mentionné ci-dessus pour obtenir les paramètres transmis par l'URL, nous pouvons également les obtenir via une correspondance régulière et la méthode window.location.search.
2. Via window.location.hrefPar exemple, lorsque nous cliquons sur une liste, nous devons transmettre une chaîne à la page detail.html, puis la page detail.html charge le contenu de la page via les données d'interaction ajax en fonction de la valeur transmise.
var index = citron; var url = recevoir.html?index=+index; $(#more).click(function(){ window.location.href = url; });La page actuelle sera remplacée par la page recieve.html, et l'url de la page deviendra :
Ensuite, nous utilisons la méthode ci-dessus pour extraire les paramètres dont nous avons besoin
3. Via window.location.openSi vous souhaitez ouvrir une nouvelle page au lieu de modifier la page actuelle, alors window.location.href n'est pas applicable. Pour le moment, nous devons utiliser window.location.open() pour y parvenir.
Une brève introduction à la fonction window.open(). window.open() a trois paramètres. Le premier paramètre est l'URL de la page à ouvrir. Le troisième paramètre est une chaîne spécifique. Une valeur booléenne indiquant si la nouvelle page remplace la page actuellement chargée dans l'historique du navigateur. Seul le premier paramètre doit être passé. Le deuxième paramètre peut également être un nom de fenêtre spécial tel que _blank, _self, _parent, _top ouvre une nouvelle fenêtre et _self obtient le même effet que window.location.href.
En continuant avec l'exemple ci-dessus :
<script> var index = citron; var url = recevoir.html?index=+index; $(#more).click(function(){ window.open(url) });</script>De cette façon, lorsque vous cliquez dessus, une nouvelle page s'ouvrira avec la même adresse URL que ci-dessus.
En raison des restrictions de sécurité du navigateur, certains navigateurs ajoutent des restrictions sur la configuration des fenêtres contextuelles. Par conséquent, les fenêtres contextuelles peuvent être bloquées pour deux raisons. doit être pris en compte. Une possibilité est que le programme de blocage intégré au navigateur bloque les fenêtres contextuelles, donc window.open() est susceptible de renvoyer Null. À ce stade, vous pouvez déterminer si la fenêtre contextuelle a été bloquée. en surveillant la valeur renvoyée.
var newWin = window.open(url);if(newWin == null){ alert(pop-up bloqué);}L'autre est une fenêtre pop-up bloquée par une extension de navigateur ou un autre programme. Ensuite, window.open() renvoie généralement une erreur. Par conséquent, pour détecter avec précision si la fenêtre pop-up est bloquée, vous devez détecter la valeur de retour et à. en même temps, window.open() est encapsulé dans un bloc try-catch. Dans l'exemple ci-dessus, il peut s'écrire comme suit :
<script> var bloqué = false; try{ var index = citron; var url = recevoir.html?index=+index; $(#more).click(function(){ var newWin = window.open(url); if (newWin == null){ bloqué = true; } }); } catch(ex){ block = true } if(blocked){ alert (la fenêtre contextuelle est bloquée } </script>)Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.