VUE+iframe添加请求头

最新推荐文章于 2025-05-16 12:14:06 发布

LEON劉先森

最新推荐文章于 2025-05-16 12:14:06 发布

阅读量1.6w

点赞数 9

CC 4.0 BY-SA版权

文章标签： javascript vue.js html html5 jquery

本文链接：https://blog.youkuaiyun.com/qq_34456265/article/details/120431625

本文介绍了一种使用JavaScript和XMLHttpRequest填充iframe内容的方法。通过设置HTTP头部信息并获取服务器响应的blob数据，动态更新iframe的src属性实现内容加载。这种方法可用于实现页面局部刷新等前端功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<iframe id="iframe" src="" />

setTimeout(() => {
  var iframe = document.querySelector("#iframe");
  this.populateIframe(iframe, [["Authorization", "Bearer " + getToken()]]);
}, 0);

  methods: {
    populateIframe(iframe, headers) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", 'http：localhost:8080/xxx');
      xhr.responseType = "blob";
      headers.forEach((header) => {
        xhr.setRequestHeader(header[0], header[1]);
      });
      xhr.onreadystatechange = () => {
        if (xhr.readyState === xhr.DONE) {
          if (xhr.status === 200) {
            iframe.src = URL.createObjectURL(xhr.response);
          }
        }
      };
      xhr.send();
    },
  }