浏览器-网页通信

__lucas

于 2024-09-20 01:33:32 发布

阅读量797

点赞数 8

分类专栏： web前端一命速通文章标签： chrome 前端 javascript

本文链接：https://blog.youkuaiyun.com/JavaZwb/article/details/142372972

版权

跨域通信

同源策略是浏览器的安全策略。如果两个页面的协议、端口和主机都相同，则它们具有相同的源，非同源页面交互会受到限制

JSONP

只限于 get 请求。利用 script 标签（还有img、link、form）没有跨域限制的性质，通过 script 标签指向一个需要访问的地址并提供一个回调函数来接收数据

// 这里用promise封装jsonp函数
jsonp("http://localhost:3000/api/test", {
   
  params: {
   
    name: "JacksonZhou",
  },
  jsonp: "getName", // 回调函数
}).then((res) => {
   
  res = JSON.parse(res);
  let index = document.getElementById("index");
  index.innerHTML = res.desc;
});

function jsonp(url, options = {
    }) {
   
  let time = options.time || 5000;
  let paramStr = "";
  if (options.params && JSON.stringify(options.params) !== "{}") {
   
    Object.keys(options.params).forEach((key) => {
   
      paramStr += `&${
     key}=