前端跨页面通信的几种方式

已于 2022-09-21 14:14:52 修改
阅读量1.3k 收藏 10
点赞数 4
分类专栏： 前端 文章标签： 前端
于 2022-09-21 13:47:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44240581/article/details/126934672
版权

在这里插入图片描述



同源页面通信

Broadcast Channel 【广播】

同一来源的不同文档（在不同的窗口、选项卡、框架或 iframe 中）之间进行通信

// page1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page1</title>
</head>
<body>
    <button onclick="sendMessage()">发广播</button>
    <button onclick="closeBroadcast()">关闭广播</button>
    <button onclick="openBroadcast()">开启广播</button>
</body>
</html>

<script>
    let bc = null;

    // 开启广播
    function openBroadcast() {
        console.log('开启广播');
        bc = new BroadcastChannel('cctv');

        // 接收广播
        bc.onmessage = function(e) {
            alert(e.data);
        };

        // 异常处理
        bc.onmessageerror = function(e) {
            console.warn('onmessageerror');
        };
    }
    openBroadcast();

    // 关闭广播
    function closeBroadcast() {
        console.log('关闭广播');
        bc.close();
    }

    // 发消息
    function sendMessage() {
        bc.postMessage('page1: 咯咯')
    }
</script>

// page2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page2</title>
</head>
<body>
    <button onclick="sendMessage()">发广播</button>
    <button onclick="closeBroadcast()">关闭广播</button>
    <button onclick="openBroadcast()">开启广播</button>
</body>
</html>

<script>
    let bc = null;

    // 开启广播
    function openBroadcast() {
        console.log('开启广播');
        bc = new BroadcastChannel('cctv');

        // 接收广播
        bc.onmessage = function(e) {
            alert(e.data);
        };

        // 异常处理
        bc.onmessageerror = function(e) {
            console.warn('onmessageerror');
        };
    }
    openBroadcast();

    // 关闭广播
    function closeBroadcast() {
        console.log('关闭广播');
        bc.close();
    }

    // 发消息
    function sendMessage() {
        bc.postMessage('page2: 哒~')
    }
</script>

Service Worker 【广播】

// page1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page1</title>
</head>
<body>
    <button onclick="sendMessage()">发广播</button>
    <p></p>
</body>
</html>

<script>
    navigator.serviceWorker.register('sw.js').then(function () {
        console.log('Service Worker 注册成功');
    })

    navigator.serviceWorker.addEventListener('message', function (e) {
        const { data } = e;

        // 过滤自己发送的消息
        if (data.from !== 'page1') {
            document.querySelector('p').innerText = `${data.from}：${data.data}`;
        }
    });

    function sendMessage() {
        const msg = {
            from: 'page1',
            data: '咯咯'
        }
        navigator.serviceWorker.controller.postMessage(msg);
    }
</script>

// page2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page2</title>
</head>
<body>
    <button onclick="sendMessage()">发广播</button>
    <p></p>
</body>
</html>

<script>
    navigator.serviceWorker.register('sw.js').then(function () {
        console.log('Service Worker 注册成功');
    })

    navigator.serviceWorker.addEventListener('message', function (e) {
        const { data } = e;

        // 过滤自己发送的消息
        if (data.from !== 'page2') {
            document.querySelector('p').innerText = `${data.from}：${data.data}`;
        }
    });

    function sendMessage() {
        const msg = {
            from: 'page2',
            data: '哒~'
        }
        navigator.serviceWorker.controller.postMessage(msg);
    }
</script>

// sw.js

self.addEventListener('message', function (e) {
    console.log('service worker receive message', e.data);
    e.waitUntil(
        self.clients.matchAll().then(function (clients) {
            if (!clients || clients.length === 0) {
                return;
            }
            clients.forEach(function (client) {
                client.postMessage(e.data);
            });
        })
    );
});

localStorage 【共享存储 + 监听】

// page1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page1</title>
</head>
<body>
    <button onclick="sendMessage()">发广播</button>
    <button onclick="closeBroadcast()">关闭广播</button>
    <button onclick="openBroadcast()">开启广播</button>
</body>
</html>

<script>
    function handleMessage(e) {
        if (e.key === 'localMessage') {
            const msg = JSON.parse(e.newValue);
            alert(msg.data);
        }
    }

    // 开启广播
    function openBroadcast() {
        console.log('开启广播');

        // 在当前页面setItem，storage事件不会触发，另外开个标签页，可以在另一个标签页中触发
        window.addEventListener('storage', handleMessage);
    }
    openBroadcast();

    // 关闭广播
    function closeBroadcast() {
        console.log('关闭广播');
        window.removeEventListener('storage', handleMessage)
    }

    // 发消息
    function sendMessage() {
        const msg = {
            data: 'page1: 咯咯',
            stamp: new Date()
        }

        // 设置相同的内容，storage不会触发，用时间戳解决
        window.localStorage.setItem('localMessage', JSON.stringify(msg));
    }
</script>

<!DOCTYPE html>
// page2

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page2</title>
</head>
<body>
    <button onclick="sendMessage()">发广播</button>
    <button onclick="closeBroadcast()">关闭广播</button>
    <button onclick="openBroadcast()">开启广播</button>
</body>
</html>

<script>
    function handleMessage(e) {
        if (e.key === 'localMessage') {
            const msg = JSON.parse(e.newValue);
            alert(msg.data);
        }
    }

    // 开启广播
    function openBroadcast() {
        console.log('开启广播');

        // 在当前页面setItem，storage事件不会触发，另外开个标签页，可以在另一个标签页中触发
        window.addEventListener('storage', handleMessage);
    }
    openBroadcast();

    // 关闭广播
    function closeBroadcast() {
        console.log('关闭广播');
        window.removeEventListener('storage', handleMessage)
    }

    // 发消息
    function sendMessage() {
        const msg = {
            data: 'page2: 哒~',
            stamp: new Date()
        }

        // 设置相同的内容，storage不会触发，用时间戳解决
        window.localStorage.setItem('localMessage', JSON.stringify(msg));
    }
</script>

Shared Worker 【共享存储 + 轮询】

无法主动通知，需要轮询获取最新数据

// page1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page1</title>
</head>
<body>
<button onclick="sendMessage()">发广播</button>
<button onclick="closeBroadcast()">关闭广播</button>
<button onclick="openBroadcast()">开启广播</button>
</body>
</html>

<script>
    let worker = null;
    let timer = null;

    // 开启广播
    function openBroadcast() {
        console.log('开启广播');
        worker = new SharedWorker("sharedWorker.js", 'messageWorker'); // [https://developer.mozilla.org/zh-CN/docs/Web/API/SharedWorker/SharedWorker]

        // 定时轮询，发送 get 指令的消息
        timer = setInterval(function () {
            worker.port.postMessage({ get: true });
        }, 1000);

        // 监听 get 消息的返回数据
        worker.port.onmessage = function (e) {
            console.log(e.data);
        }
    }
    openBroadcast();

    function closeBroadcast() {
        console.log('关闭广播');
        clearInterval(timer);
    }

    // 发消息
    function sendMessage() {
        worker.port.postMessage('page1: 咯咯');
    }
</script>

// page2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page2</title>
</head>
<body>
    <button onclick="sendMessage()">发广播</button>
    <button onclick="closeBroadcast()">关闭广播</button>
    <button onclick="openBroadcast()">开启广播</button>
</body>
</html>

<script>
    let worker = null;
    let timer = null;

    // 开启广播
    function openBroadcast() {
        console.log('开启广播');
        worker = new SharedWorker("sharedWorker.js", 'messageWorker'); // [https://developer.mozilla.org/zh-CN/docs/Web/API/SharedWorker/SharedWorker]

        // 定时轮询，发送 get 指令的消息
        timer = setInterval(function () {
            worker.port.postMessage({ get: true });
        }, 1000);

        // 监听 get 消息的返回数据
        worker.port.addEventListener('message', (e) => {
            console.log(e.data);
        }, false);

        // addEventListener监听时要手动开始，onmessage时不需要
        worker.port.start();
    }
    openBroadcast();

    function closeBroadcast() {
        console.log('关闭广播');
        clearInterval(timer);
    }

    // 发消息
    function sendMessage() {
        worker.port.postMessage('page2: 哒~');
    }
</script>

// sharedWorker.js
let data = null;

self.addEventListener('connect', function (e) {
    const port = e.ports[0];

    port.addEventListener('message', function (event) {
        // get 指令则返回存储的消息数据
        if (event.data.get) {
            data && port.postMessage(data);
        }
        // 非 get 指令则存储该消息数据
        else {
            data = event.data;
        }
    });

    port.start();
});

window.opener 【口口相传】

// page1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page1</title>
</head>
<body>
    <button onclick="sendMessage()">发广播</button>
    <button onclick="closeBroadcast()">关闭广播</button>
    <button onclick="openBroadcast()">开启广播</button>
</body>
</html>

<script>
    let wins = []; // 记录打开的子窗口

    const openedWin = window.open('page2.html')
    wins.push(openedWin);

    // 发广播
    function sendMessage() {
        const openingWins = wins.filter(item => !item.closed); // 过滤已被关闭的页面

        // 向子级窗口发送消息
        if (openingWins.length) {
            const msg = {
                data: 'page1: 咯咯',
                upMsg: false,         // 是否向上级窗口发送的消息
            }

            openingWins.forEach(item => item.postMessage(msg))
        }

        // 有父级窗口，向父级窗口发消息
        if (window.opener && !window.opener.closed) {
            const msg = {
                data: 'page1: 咯咯',
                upMsg: true,         // 是否向上级窗口发送的消息
            }

            window.opener.postMessage(msg);
        }
    }

    // 开启广播
    function openBroadcast() {
        window.addEventListener('message', function (e) {
            const { data, upMsg } = e.data;
            alert(data);

            // 收到向上传递的消息，有父级窗口，继续向上传递
            if (window.opener && !window.opener.closed && upMsg) {
                window.opener.postMessage(e.data);
            }

            const openingWins = wins.filter(item => !item.closed); // 过滤已被关闭的页面

            // 收到向下传递的消息，有子级窗口，继续向下传递
            if (openingWins.length && !upMsg) {
                openingWins.forEach(item => item.postMessage(e.data))
            }
        });
    }
    openBroadcast()

    // 关闭广播
    function closeBroadcast() {
        // TODO
    }
</script>

// page2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page2</title>
</head>
<body>
    <button onclick="sendMessage()">发广播</button>
    <button onclick="closeBroadcast()">关闭广播</button>
    <button onclick="openBroadcast()">开启广播</button>
</body>
</html>

<script>
    let wins = []; // 记录打开的子窗口

    const openedWin = window.open('page3.html')
    wins.push(openedWin);

    // 发广播
    function sendMessage() {
        const openingWins = wins.filter(item => !item.closed); // 过滤已被关闭的页面

        // 向子级窗口发送消息
        if (openingWins.length) {
            const msg = {
                data: 'page2: 咯咯',
                upMsg: false,         // 是否向上级窗口发送的消息
            }

            openingWins.forEach(item => item.postMessage(msg))
        }

        // 有父级窗口，向父级窗口发消息
        if (window.opener && !window.opener.closed) {
            const msg = {
                data: 'page2: 咯咯',
                upMsg: true,         // 是否向上级窗口发送的消息
            }

            window.opener.postMessage(msg);
        }
    }

    function openBroadcast() {
        window.addEventListener('message', function (e) {
            const { data, upMsg } = e.data;
            alert(data);


            // 收到向上传递的消息，有父级窗口，继续向上传递
            if (window.opener && !window.opener.closed && upMsg) {
                window.opener.postMessage(e.data);
            }

            const openingWins = wins.filter(item => !item.closed); // 过滤已被关闭的页面

            // 收到向下传递的消息，有子级窗口，继续向下传递
            if (openingWins.length && !upMsg) {
                openingWins.forEach(item => item.postMessage(e.data))
            }
        });
    }
    openBroadcast()

    // 关闭广播
    function closeBroadcast() {
        // TODO
    }
</script>

// page3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page3</title>
</head>
<body>
    <button onclick="sendMessage()">发广播</button>
    <button onclick="closeBroadcast()">关闭广播</button>
    <button onclick="openBroadcast()">开启广播</button>
</body>
</html>

<script>
    let wins = []; // 记录打开的子窗口

    // 发广播
    function sendMessage() {
        const openingWins = wins.filter(item => !item.closed); // 过滤已被关闭的页面

        // 向子级窗口发送消息
        if (openingWins.length) {
            const msg = {
                data: 'page3: 咯咯',
                upMsg: false,         // 是否向上级窗口发送的消息
            }

            openingWins.forEach(item => item.postMessage(msg))
        }

        // 有父级窗口，向父级窗口发消息
        if (window.opener && !window.opener.closed) {
            const msg = {
                data: 'page3: 咯咯',
                upMsg: true,         // 是否向上级窗口发送的消息
            }

            window.opener.postMessage(msg);
        }
    }

    function openBroadcast() {
        window.addEventListener('message', function (e) {
            const { data, upMsg } = e.data;
            alert(data);

            // 收到向上传递的消息，有父级窗口，继续向上传递
            if (window.opener && !window.opener.closed && upMsg) {
                window.opener.postMessage(e.data);
            }

            const openingWins = wins.filter(item => !item.closed); // 过滤已被关闭的页面

            // 收到向下传递的消息，有子级窗口，继续向下传递
            if (openingWins.length && !upMsg) {
                openingWins.forEach(item => item.postMessage(e.data))
            }
        });
    }
    openBroadcast()

    // 关闭广播
    function closeBroadcast() {
        // TODO
    }
</script>


非同源页面通信


iframe 【代理】

父A = 非同源应用A （e.g. http://localhost:63342/demo/iframe/page1.html）
子A = 非同源iframe桥（e.g. http://localhost:8081/）

父B = 非同源应用B （e.g. http://192.168.2.112:3000/）
子B = 非同源iframe桥 （e.g. http://localhost:8081/）

  1. 所有消息都先发给iframe桥
const bridgeIframe = document.getElementById('bridgeIframe');
const msg = {
    type: 'bridge-msg',
    data: 'page1: 咯咯'
};
bridgeIframe.contentWindow.postMessage(msg, '*');
// window.frames[0].window.postMessage(msg, '*');
  1. iframe接收后发起同源广播，同源广播可以在另一个应用中监听
// 接收iframe消息
window.addEventListener('message', (e) => {
  const { data } = e;

  // 转发消息，消息会进入另一个跨域应用的iframe桥的bc.onmessage中
  if (data.type === 'bridge-msg') {
    this.bc.postMessage(`${data.data}`)
  }
});
  1. iframe通过窗口对象转发消息
window.parent.postMessage(e.data, '*');



完整代码

// page1 纯html页面，webstorm服务器运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page1</title>
</head>
<body>
    <span></span>

    <button onclick="sendMessage()">发广播</button>
</body>
</html>

<script>

    // 发消息
    function sendMessage() {
        const bridgeIframe = document.getElementById('bridgeIframe');
        const msg = {
            type: 'bridge-msg',
            data: '咯咯'
        };
        bridgeIframe.contentWindow.postMessage(msg, '*');
    }

    // 创建桥梁
    function createBridge() {
        const bridgeIframe = document.createElement('iframe');
        bridgeIframe.setAttribute('id', 'bridgeIframe');
        // bridgeIframe.style.display = 'none';
        bridgeIframe.src = 'http://localhost:8081/';
        document.body.appendChild(bridgeIframe);
    }
    createBridge();

    // 监听iframe桥发来的消息
    window.addEventListener('message', function(e) {
        const { data, origin } = e;
        document.querySelector('span').innerText = `${origin}: ${data}`;
    });
</script>

// bridgeIframe Vue2应用 http://localhost:8081/

<button @click="sendMessage">发广播</button>

<script>
  export default {
    name: 'App',
    data() {
      return {
        bc: null,
      }
    },
    methods: {
      // 开启广播
      openBroadcast() {
        this.bc = new BroadcastChannel('cctv');
  
        // 接收广播
        // bc广播是同源广播，因为两个跨域应用
        this.bc.onmessage = (e) => {
          console.log(`iframe桥接收到的消息：${e.data}`);
          window.parent.postMessage(e.data, '*');
        };
  
        // 异常处理
        this.bc.onmessageerror = function(e) {
          console.warn('onmessageerror');
        };
      }
    },
    mounted() {
      this.openBroadcast();
  
      // 接收iframe消息
      window.addEventListener('message', (e) => {
        const { data } = e;
  
        // 转发消息，消息会进入另一个跨域应用的iframe桥的bc.onmessage中
        if (data.type === 'bridge-msg') {
          this.bc.postMessage(`${data.data}`)
        }
      });
    }
  }
</script>

// page2 React应用 http://192.168.2.112:3000

import './App.css';
import { useEffect, useState } from "react";

function App() {
    const [msg, setMsg] = useState('');

    useEffect(() => {
        createBridge();

        // 监听iframe桥发来的消息
        window.addEventListener('message', function (e) {
            const { data, origin } = e;
            setMsg(`${origin}: ${data}`);
        });
    }, [])


    // 创建桥梁
    const createBridge = () => {
        const bridgeIframe = document.createElement('iframe');
        bridgeIframe.setAttribute('id', 'bridgeIframe');
        // bridgeIframe.style.display = 'none';
        bridgeIframe.src = 'http://localhost:8081/';
        document.body.appendChild(bridgeIframe);
    }

    // 发消息
    const sendMessage = () => {
        const bridgeIframe = document.getElementById('bridgeIframe');
        const msg = {
            type: 'bridge-msg',
            data: '哒~'
        };
        bridgeIframe.contentWindow.postMessage(msg, '*');
    }

  return (
    <div className="App">
        { msg }

        <button onClick={sendMessage}>发广播</button>
    </div>
  );
}

export default App;

参考文章

面试官：前端跨页面通信，你知道哪些方法？

等下吃什么？
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端跨域的几种解决方式总结（推荐）
08-29
主要介绍了前端跨域的几种解决方式，详细介绍了同源策略并同时给出了跨域的五种解决方案，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
angular 组件通信的几种实现方式
12-04
单页面应用组件通信有以下几种，这篇文章主要讲 Angular 通信 父组件 => 子组件 子组件 => 父组件 组件A = > 组件B 父组件 => 子组件 子组件 => 父组件 sibling => sibling @input @output setters (本质上还是@input) 注入父组件 ngOnChanges() (不推荐使用) 局部变量 @ViewChild() service service service Rxjs的Observalbe Rxjs的Observalbe Rxjs的Observalbe
前端跨页面通信方案介绍
04-02 905
在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。这就是本文说说的跨页面通信方案，那么目前有哪些跨页面的通信方案呢？本文重点介绍一下。同源页面之间跨页面通信一般有如下几种方案。
实施前端微服务化的六七种方式
02-24
微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。以及，它们应该可以在共享组件的同时进行并行开发——这些组件可以通过NPM或者GitTag、GitSubmodule来管理。注意：这里的前端应用指的是前后端分离的单应用页面，在这基础才谈论微前端才有意义。结合我最近半年在微前端方面的实践和研究来看，微前端架构一般可以由以下几种方式进行：使用HTTP服务器的路由来重定向多个应用在不同的框架之上设计通讯、加载机制，诸如Mooa和Single-SPA通过组
《现代JavaScript高级教程》前端跨页面通信：实现页面间的数据传递与交互
linwu的博客
07-09 745
前端跨页面通信是指在不同的浏览器页面或标签页之间进行数据传递和交互的过程。在单页面应用（Single-Page Application）中，这种通信往往是在同一页面的不同组件之间进行的，而在多页面应用（Multi-Page Application）中，通信涉及到不同的页面之间的数据传递和交互。前端跨页面通信的目的是实现不同页面之间的信息共享和协作，使得用户在不同页面间的操作能够产生相应的效果和影响。在不同页面之间传递数据和状态。发送消息和通知。同步数据和状态的更新。实现页面间的协作和交互操作。
web前端实现多个元素标签页相互通信、html页面之间相互通信
“代码农”微信公众号
04-05 3702
web前端实现多个元素标签页相互通信、html页面之间相互通信
java按钮触发另一个页面_前端跨页面通信，你知道哪些方法？
weixin_39948309的博客
11-24 870
戳蓝字「前端技术优选」关注我们哦！引言在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会...
前端跨页面通信
大灰狼的小绵羊哥哥的博客
04-15 1633
背景 用户在实际的操作场景中会打开多个 Tab 页面A、B、C、D、E...。当用户在 E Tab 页退出登录，并且登录到新的账号，然后用户切换到非 E 的 Tab 时，发现登录信息没有刷新， 并且由于登录信息没有刷新，会出现操作异常。这个问题简单来说就是多个 Tab 信息没有同步。问题的关键在于一个 Tab 退出重新登录，需要通知到其他的 Tab 刷新到最新的信息。本质问题就是解决前端跨页面通信。 本篇文章就是对前端跨页面通信的解决方案做了一个了解。 onstorage WindowEventHa
前端不同服务器之间的通信_前端跨域方案
weixin_39875516的博客
12-03 539
所谓跨域，顾名思义，跨到了另外的域，域不仅仅指的是不同的域名网站，可能同一个域名不同的端口号也算不同的域。浏览器是有规则的，只要协议、域名、端口有任何一个不同，都被当作是不同的域。协议指的是 http，或者 https 等。跨域概念一个域下的文档或脚本试图去请求另一个域下的资源。跨域形式标签嵌入 CSS。由于 CSS 的松散的语法规则，CSS 的跨域需要一个设置正确的 Conten...
vue父组件向子组件(props)传递数据的方法
11-29
vue页面结构 在做项目的时候常常有这样的一个情况，这个页面的...其实vue是有三种方式可以组件之间传递数据（props，组件通信，slot），这次就说第一种方式如下： a父组件内容： 引入b子组件import b form ‘b.vue’
FE-Interview-Questions:关注公众号「前端进阶之旅」，一起学习。前端面试常考问题整理，按模块知识点分类 Front-end-Developer-Questions by Modules and knowledge
04-13
FE-Interview-Questions前端面试常考...类的定义和继承的几种方式前端错误监控页面布局CSS盒模型及BFCDOM事件的总结HTTP协议综合版本Interview-QuestionsFront-end-Developer-Questions[question-and-answer-version]
程序员为什么还要刷题-js-ajax:[js,ajax]
07-07
如果我们在应用程序的客户端有一些功能，但仍然可以在不刷新页面的情况下与后端通信，那将会非常好。 要是我们有一种非阻塞和异步的客户端语言就好了…… 转身谈话（10 分钟） 5 分钟 T&T。 5分钟复习。 . 当您与 ...
JAVA毕业设计之基于springboot的疾病防控综合系统的设计与实现(springboot+mysql)完整源码.zip
最新发布
04-05
Thymeleaf或其他模板引擎：用于前端页面的渲染。 JWT（JSON Web Tokens）：用于处理无状态认证。 Hibernate Validator：用于后端数据的校验。 Redis：可能用于缓存数据，提高系统响应速度。 Swagger：用于生成API...
工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究
02-28
（3）针对页面自适应问题，本文结合渐进增强以及拥抱流式布局的思想，同时研究利用了移动设备的视口特性，实现跨分辨率、跨设备的页面自适应。 （4）针对系统的功能实现问题，通过结合利用原生态框架与HTML5的跨平台...
国微CMS部队门户站群系统(部队站群版)-PHP
06-21
3、 提供文章、图片、视频、下载、信息公开、领导信箱、表单系统、广告模块、在线访谈、民意征集、在线调查、手机短信、通信录、数据备份、搜索模块、单网页、站群系统、专题模块、数据推送等相关必要模块。...
超级有影响力霸气的Java面试题大全文档
07-18
assertion(断言)在软件开发中是一种常用的调试方式，很多开发语言中都支持这种机制。在实现中，assertion就是在程序中的一条语句，它对一个boolean表达式进行检查，一个正确程序必须保证这个boolean表达式的值为...
《程序员》杂志2012年第1期.pdf （免费积分下载）
07-06
正如Robert Scoble在近两年前Siri被Apple收购时撰文所指出的，Siri代表了继1990年代“通过域名找页面”、2000年代“通过页面交互聚人”之后的第三代互联网交互模式：“消除网页，将API与人直接联系在一起”。...
后端向前端传数据的几种方式
06-08
后端向前端传递数据的几种方式包括： 1. AJAX：使用 JavaScript 发送异步请求，从后端获取数据并更新前端页面。 2. WebSocket：一种支持双向通信的协议，可以在后端和前端之间实时传输数据。 3. RESTful API：一种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值