HTML 페이지 간에 매개변수를 전달하는 프런트엔드 방법에 대한 자세한 설명-HTML 튜토리얼-php.cn

HTML 페이지 간에 매개변수를 전달하는 프런트엔드 방법에 대한 자세한 설명

无忌哥哥

풀어 주다： 2018-07-12 09:07:13

원래의

2499명이 탐색했습니다.

프로젝트에서 자주 발생하는 상황은 사례 목록 등 목록이 있는 경우입니다. 목록에 있는 항목을 클릭하면 상세 페이지로 이동합니다. 세부 사항은 클릭한 기록을 기반으로 생성됩니다. 사례와 특정 세부 사항 페이지는 나중에 사용자가 추가하기 때문에 작성을 시작할 때 모두 소진하는 것은 불가능합니다. 따라서 페이지로 이동할 때 이 매개변수를 통해 데이터 요청을 할 수 있도록 매개변수를 전달해야 하며, 백그라운드에서 반환된 데이터를 기반으로 페이지를 생성해야 합니다. 따라서 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은 다음과 같습니다.

HTML 페이지 간에 매개변수를 전달하는 프런트엔드 방법에 대한 자세한 설명

전달하려는 문자열이 전달되었습니다.

그런 다음 현재 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은 다음과 같습니다:

#🎜🎜 ##🎜🎜 #

그런 다음 위의 방법을 사용하여 필요한 매개변수를 추출합니다 HTML 페이지 간에 매개변수를 전달하는 프런트엔드 방법에 대한 자세한 설명

3 window.location.open을 통해

열려면 현재 페이지를 변경하는 대신 window.location.href를 적용할 수 없습니다. 이때 window.location.open()을 사용하여

간략한 소개를 수행해야 합니다. window.open() 함수에 window.open()에는 세 개의 매개변수가 있습니다. 첫 번째 매개변수는 열려는 페이지의 URL입니다. 세 번째 매개변수는 특정 문자열이고 여부를 나타내는 매개변수입니다. 새 페이지는 첫 번째 매개변수만 전달하여 현재 로드된 페이지의 부울 값을 집중시킵니다. 두 번째 매개변수는 "_blank", "_self", "_parent", "_top"과 같은 특수 창 이름일 수도 있으며, "_blank"는 새 창을 열고 "_self"는 window.location.href와 동일한 효과를 얻습니다. .#🎜 🎜#

위의 예를 계속하세요:

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!