HTML 페이지 간에 매개변수를 전달하는 프런트엔드 방법에 대한 자세한 설명
- 无忌哥哥원래의
- 2018-07-12 09:07:132500검색
프로젝트에서 자주 발생하는 상황은 사례 목록 등 목록이 있는 경우입니다. 목록에 있는 항목을 클릭하면 상세 페이지로 이동합니다. 세부 사항은 클릭한 기록을 기반으로 생성됩니다. 사례와 특정 세부 사항 페이지는 나중에 사용자가 추가하기 때문에 작성을 시작할 때 모두 소진하는 것은 불가능합니다. 따라서 페이지로 이동할 때 이 매개변수를 통해 데이터 요청을 할 수 있도록 매개변수를 전달해야 하며, 백그라운드에서 반환된 데이터를 기반으로 페이지를 생성해야 합니다. 따라서 a 태그를 통해 점프하는 것은 확실히 작동하지 않습니다.
우리는 종종 양식을 제출할 때 매개변수를 전달하여 양식을 숨기면 효과를 얻을 수 있습니다.
또한 window.location.href 및 window.open도 효과를 얻을 수 있습니다.
1. 양식을 통해 매개변수를 전달합니다.
<html>
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<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>
<!--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>
<form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">
<input type="hidden" name="hid" value = "" index = "lemon">
<img src = "main_jpg10.png" / alt="HTML 페이지 간에 매개변수를 전달하는 프런트엔드 방법에 대한 자세한 설명" >
<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 src = "main_jpg10.png" / alt="HTML 페이지 간에 매개변수를 전달하는 프런트엔드 방법에 대한 자세한 설명" >
<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 src = "main_jpg10.png" / alt="HTML 페이지 간에 매개변수를 전달하는 프런트엔드 방법에 대한 자세한 설명" >
<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>이미지를 클릭하면 receive.html 페이지로 이동합니다. 페이지 URL은 다음과 같습니다.
전달하려는 문자열이 전달되었습니다.
그런 다음 현재 URL에서 문자열 분할을 수행합니다.
window.location.href.split(“=”)[1]//Get 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은 다음과 같습니다: #🎜🎜 ##🎜🎜 #그런 다음 위의 방법을 사용하여 필요한 매개변수를 추출합니다
위의 예를 계속하세요:
<script>
var index = "lemon";
var url = "receive.html?index="+index;
$("#more").click(function(){
window.open(url)
});
</script>이렇게 클릭하면 새 페이지가 열리고 페이지의 URL 주소는 위와 동일하게 됩니다. .
브라우저 보안 제한으로 인해 일부 브라우저에는 팝업 창 구성에 제한이 추가됩니다. 대부분의 브라우저에는 팝업 창 차단 기능이 내장되어 있으므로 창이 차단될 수 있습니다. 차단되면 두 가지 가능성을 고려해야 합니다. 하나는 브라우저에 내장된 차단 프로그램이 팝업 창을 차단한다는 것입니다. 그러면 window.open()이 이때 팝업 창을 반환할 가능성이 높습니다. 반환된 값을 모니터링하여 차단 여부를 확인합니다.
var newWin = window.open(url);
if(newWin == null){
alert("弹窗被阻止");
}다른 하나는 브라우저 확장 프로그램이나 다른 프로그램에 의해 팝업 창이 차단된 경우 window.open()에서 일반적으로 오류가 발생하므로 팝업 창이 차단되었는지 정확하게 감지합니다. , 반환 값을 감지하는 동안 try-catch 블록에 window.open()을 캡슐화해야 합니다. 위의 예는 다음 형식으로 작성할 수 있습니다.
<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>위 내용은 HTML 페이지 간에 매개변수를 전달하는 프런트엔드 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!