91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

  1. 瀏覽器出于安全考慮（數(shù)據(jù)安全，服務(wù)器安全，減少 xss，CSRF 攻擊）  2. https://    www.     abc.com    :8000     /a.html      協(xié)議      子域名     主域名     端口號(hào)   路徑  3. 非同源，請(qǐng)求發(fā)送后，瀏覽器會(huì)攔截響應(yīng)

// 前端<button onclick="handle()">請(qǐng)求</button>
<script>    function jsonp(url, cb) {      return new Promise((resolve, reject) => {
        const script = document.createElement('script')
        // 定義一個(gè)全局函數(shù)，用來(lái)接收后端返回的數(shù)據(jù)        window[cb] = function (data) {          // console.log(data) // 后端返回的數(shù)據(jù)          resolve(data)        }
        script.src = `${url}?cb=${cb}`
        // 將標(biāo)簽加到document.body時(shí)，瀏覽器就會(huì)發(fā)url請(qǐng)求        document.body.appendChild(script)          // callback('hello world')      })    }
    function handle() {      jsonp('http://localhost:3000', 'callback').then(res => {        console.log(res)      })    } </script>

// 后端const http = require('http');
http.createServer((req, res) => {  // 獲取前端傳過(guò)來(lái)參數(shù)  const query = new URL(req.url, `http://${req.headers.host}`).searchParams
  if (query.get('cb')) {    const cb = query.get('cb')  // 'callback'    const data = 'hello world'    const result = `${cb}("${data}")`   // "callback('hello world')"    res.end(result)  }
}).listen(3000);

const http = require('http')
const server = http.createServer((req, res) => {  res.writeHead(200, {    'Access-Control-Allow-Origin': '*',    // 允許所有域名訪問(wèn)    // 也可自行設(shè)置指定的域名可以訪問(wèn)     // 例如： 'Access-Control-Allow-Origin': 'http://192.168.2.1:5500'  })  res.end('hello world');})
server.listen(3000)

// 前端<script>    function WebSocketTest(url, params = {}) {      return new Promise((resolve, reject) => {
        // 創(chuàng)建socket實(shí)例對(duì)象        const socket = new WebSocket(url)
        // 當(dāng)連接打開(kāi)時(shí)發(fā)送數(shù)據(jù)        socket.onopen = () => {          socket.send(JSON.stringify(params))        }
        // 接收到后端的消息時(shí)打印數(shù)據(jù)并解決Promise        socket.onmessage = (event) => {          console.log(event.data)          resolve(event.data)        }      })    }
    WebSocketTest('ws://localhost:3000', { age: 18 }).then(res => {      console.log(res)    })  </script>

// 后端
const WebSocket = require('ws');
// 在 3000 端口上建立 WebSocket 伺服器 （隨時(shí)都在線的服務(wù)）const ws = new WebSocket.Server({ port: 3000 });
let count = 0
// 監(jiān)聽(tīng)連接ws.on('connection', (obj) => {  // console.log(obj);  obj.on('message', (msg) => {  // 收到客戶(hù)端發(fā)來(lái)的消息    // console.log(msg.toString());   // 客戶(hù)端傳過(guò)來(lái)的數(shù)據(jù)    obj.send('收到了')
    setInterval(() => {      count++      obj.send(count)    }, 2000)
  })})

<h2>首頁(yè)</h2><iframe id="frame" src="http://127.0.0.1:5500/%E8%B7%A8%E5%9F%9F/postMessage/detail.html"frameborder="0" width="800" height="500"></iframe>
<script>    let obj = { name: '阿杰', age: 18 }
    document.getElementById('frame').onload = function () {      this.contentWindow.postMessage(obj, 'http://127.0.0.1:5500') // 向iframe發(fā)送消息
      window.onmessage = function (e) { // 接收iframe發(fā)送的消息        console.log(e.data);      }
    }  </script>

<h3>詳情頁(yè) --- <span id="title"></span></h3>
<script>    const title = document.getElementById("title");    window.onmessage = function (e) {  // 接收父級(jí)頁(yè)面?zhèn)鬟^(guò)來(lái)的數(shù)據(jù)      // console.log(e.data);      title.innerText = e.data.age;      e.source.postMessage("阿杰 20了", e.origin)  // 向父級(jí)頁(yè)面發(fā)送消息    }  </script>