跨域訪問方法介紹(3)--使用片斷識別符傳值

時間 2021-08-12

標籤 javascript html java web 跨域 tomcat app webapp ide 測試欄目 JavaScript 简体版

原文原文鏈接

片斷標識符（fragment identifier）指的是，URL 中 # 號後面的部分，好比 http://example.com/x.html#fragment 的 #fragment。若是隻是改變片斷標識符，頁面不會從新刷新。父窗口能夠把信息，寫入子窗口的片斷標識符。子窗口經過監聽 hashchange 事件獲得通知；一樣的，子窗口也能夠改變父窗口的片斷標識符。本文主要介紹使用片斷標識符來實現跨域數據傳遞，文中所使用到的軟件版本：Chrome 90.0.4430.212。javascript

一、步驟說明

在 a.html(http://localhost:8080/a.html) 頁面嵌入 b.html(http://localhost:9090/b.html) 頁面，而後 a.html 改變 b.html 的片斷標識符，b.html 接受到消息後改變父頁面的片斷標識符。html

二、a.html(http://localhost:8080/a.html)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>片斷識別符 測試</title>

</head>
<body>
    <iframe src="http://localhost:9090/b.html" id="frame"></iframe>
    
    父頁面
    <button onclick="sendMessage()">向子頁面傳數據</button>
</body>

<script type="text/javascript">
    function sendMessage() {
        let src = document.getElementById('frame').src;
        document.getElementById('frame').src = src + "#hello";
    }
    
    window.onhashchange = function() {
        alert(window.location.hash);   
    }
    
</script>
</html>

三、b.html(http://localhost:8080/b.html)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子頁面</title>

<script type="text/javascript">
    window.onhashchange = function() {
        alert(window.location.hash);
        parent.location.href = "http://localhost:8080/a.html#haha";
    }
</script>
</head>
<body>
   子頁面
</body>

</html>