如何在没有新请求的情况下修改 ajax src 属性？
Posted
技术标签:
【中文标题】如何在没有新请求的情况下修改 ajax src 属性？【英文标题】：How to modify ajax src atributte without new request? 【发布时间】：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 请求中设置的任何标头，因为两者完全不相关。 【参考方案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以上是关于如何在没有新请求的情况下修改 ajax src 属性？的主要内容，如果未能解决你的问题，请参考以下文章
GMail Chat 如何能够在没有客户端交互的情况下发出 AJAX 请求？
如何使用ajax创建数组并在没有回调函数的情况下对其进行修改？