前端中不一樣頁面之間傳遞參數的幾種方式

時間 2019-12-14

標籤前端不一樣頁面之間傳遞參數幾種方式简体版

原文原文鏈接

1. 經過a標籤傳遞參數，接收頁面使用window.location.search獲取頁面html

//01.html
<a href = '02.html?name=Auyuer'>click me to jump</a>



//02.html
function param(){
        var url=window.location.search;
        var params = url.substring(url.indexOf("?")+1);
        var par = params.split("=");
        var str = par[0]+':'+par[1];
        return str;
}

這裏說一下Location對象屬性都有哪些：url

location.hash 　可設置或返回從#開始的部分　　　　
例如 http://example.com:1234/test.htm#part2 獲得的就是#part2
location.host 可設置或返回當前url的主機名稱和端口號（example.com:1234）
location.hostname 可設置或返回當前Url的主機名（example.com）
location.href　　可設置或返回當前整個url（http://example.com:1234/test.htm#part2）
location.pathname 可設置或返回當前Url的路徑部分（/text.html）
location.port 可設置或返回當前Url的端口部分（1234）
location.protocol 可設置或返回當前url的協議（http:）
location.search 可設置或返回當前 URL 的查詢部分（？開始）

2. 經過手動給url拼接字符，利用window.open打開新窗口spa

<button id="btn">click me to jump</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
        var url = '01 end.html?username=Auyuer';
        window.open(url, '_self')
    }
</script>
//window.open(URL,name,features,replace)

具體參數以下表所示：code

在這裏區別一下window.open() 和 Document.open()的區別：orm

<button onclick="createNewDoc()">點擊寫入新文檔</button>


function createNewDoc()
    {
        var new_doc = document.open("text/html","replace");
        var txt = "<html><body>這是新的文檔</body></html>";
        new_doc.write(txt);
        new_doc.close();
    }

//新文檔用 document.write() 方法或 document.writeln() 方法寫入內容，寫入內容後，必須用 document.close() 方法關閉文檔，並迫使其內容顯示出來。

可自行運行下代碼感覺區別htm

window對象下有document對象對象

3. form表單提交數據blog

//01.html
<form action="01 end.html" method="get">
    <label for = 'username'>username：
        <input type="text" name="username" id = username/>
    </label>
    <input type="submit">
</form>

//02.html
param();
    function param(){
        var params = window.location.search;
        params = params.substring(params.indexOf('?')+1);
        params = params.split("=");
        console.log(params[0] + ':'+decodeURI(params[1]));
    }