如何修改iframe的location以调整其内部相对路径的引用域名？

结论 #

你提到的frame.contentWindow.location.host = "mydomain.com";方式完全无法实现你的需求，还会触发报错或页面跳转，具体原因和可行方案如下：

错误原因 #

• 直接修改location.host会触发iframe页面的整体跳转：location对象下和地址相关的属性赋值时，浏览器都会主动加载新地址对应的页面，本质是让iframe跳转到mydomain.com的根路径，而非仅修改相对路径的拼接基准。
• 存在跨域权限限制：如果iframe当前加载的域名和你要设置的mydomain.com不同源，浏览器会禁止你访问frame.contentWindow.location对象，直接抛出跨域错误。

可行实现方案 #

你要实现「iframe内部相对路径资源都基于指定域名加载」的需求，有两种合规的实现方式：

1. 直接指定iframe的源地址为目标域名下的页面
   直接给iframe设置src属性即可：frame.src = "https://mydomain.com/你的页面路径.html"，iframe本身的源会被设置为mydomain.com，内部所有相对路径自然会基于该域名拼接。
2. 动态生成页面时添加base标签
   如果iframe的内容是你自己动态生成的（比如通过srcdoc属性写入HTML内容），只需要在页面的<head>标签内添加base标签指定基准地址即可：

   <head>
     <base href="https://mydomain.com/">
   </head>
   

   该标签的作用就是全局指定当前页面所有相对路径的拼接基准，完全匹配你的需求。

注意 #

如果iframe加载的是你无权限修改的第三方页面，你无法强行修改它的相对路径基准，这是浏览器的同源安全策略强制限制的。 #

内容的提问来源于stack exchange，提问作者Meet Patel