如何在没有新请求的情况下修改 ajax src 属性？答案

【问题标题】：How to modify ajax src atributte without new request?如何在没有新请求的情况下修改 ajax src 属性？
【发布时间】：2018-10-26 22:05:24
【问题描述】：

我正在尝试使用使用 HTTP 身份验证的系统制作 iframe。我正在使用此代码：

<iframe id="dashboard"></iframe>
<script type="text/javascript">
                            $.ajax(
                                {
                                    url: \'https://mysystem.xxxx/\',
                                    beforeSend: function(xhr) {
                                    xhr.withCredentials = true;

                                    xhr.setRequestHeader(
                                    "Authorization", "Basic Z2Vxxxxxxxxxxx=="
                                    );
                                    },
                                     success: function(data) {
                                    $(\'#dashboard\').attr(\'src\', \'https://mysystem.xxxx\');
                                    $(\'#dashboard\').contents().find(\'html\').html(data);
                                    }

                                }
                            );
                        </script>

使用此代码，当页面加载时，它会向系统生成三个请求：

OPTIONS -> 验证 CORS 选项；没关系。
GET -> 包含 auth 标头。系统返回200并发送数据。
其他 GET -> 没有 auth 标头。然后系统返回“401”。这是个问题。

如果我删除这一行：

$(\'#dashboard\').attr(\'src\', \'https://mysystem.xxxx\');

页面加载，但 iframe 的静态内容（图像、css、js）返回 404。

【问题讨论】：

那么，嗯... ajax 与此有什么关系？ “其他 GET”与 ajax 请求完全无关。当您修改 iframe 的 src 属性时，它会请求您告诉它请求的内容。它不会有您在 ajax 请求中设置的任何标头，因为两者完全不相关。

标签： javascript jquery html ajax iframe

【解决方案1】：

您可以使用绝对路径创建图像、css、js 资产，例如：https://somedomain.com/path/to/image.jpg。这样您就不需要为 iframe 提供src。

更新

假设您的服务器以字符串形式返回您data，您可以搜索并将那里的所有相对路径替换为绝对路径。

const data = `<link rel="/css/relative/path" /><body><img src="/some/relative/path"/>
<img src="https://some-other-abs.com" /></body>`;

const absData = data.replace(/(?:rel|src)="([^"]+)"/g, function(group, match) {
  if (!match.startsWith('http')) {
    return group.replace(match, `http://example.com${match}`);
  }
  return group;
})
console.log(absData);

【讨论】：

iframe内容是系统生成的，不能修改为绝对路径。
你总是可以做那个ajax，把data作为字符串，然后应用一些字符串替换来添加绝对路径。
怎么做？能给我举个例子吗（对不起，我正在学习ajax）？
添加了一个 sn-p