HTML object标签设置CSS宽度无效，无法修改嵌入页面宽度求助

我尝试用以下代码将www.example.com页面加载到指定宽度，但通过CSS无法修改该嵌入页面的宽度，参考相关内容后仍未解决，寻求可行方案。

<style> 
#window1 { width: 100%; border: solid; border-style: solid; border-color: black; } 
#window1 object { width: 100%; } 
</style> 
<script> 
function load() { 
  document.getElementById("window1").innerHTML='<object width="100%" type="text/html" data="http://www.example.com"></object>'; 
} 
</script>

首先得说明为啥你的CSS不起作用：这是同源策略在搞鬼——当你嵌入的是外部域名的页面时，浏览器会阻止你直接修改它的DOM或样式，毕竟这涉及到安全问题，总不能随便改别人网站的内容对吧？

给你两个方向的解决方案，看你能不能控制目标页面来选：

如果你能控制嵌入的目标页面（比如是你自己的站点） #

这是最理想的情况，直接在目标页面里做响应式适配：

• 首先加上viewport元标签，让页面能识别容器宽度：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 然后把目标页面的内部样式改成自适应布局，比如用百分比、flex或者grid，这样它嵌入到你的容器里时，就会自动跟着容器的宽度调整，不需要你在外部强行修改。

如果你没法控制目标页面（比如是第三方站点） #

这种情况只能用一些“曲线救国”的方法：

方法1：用iframe配合缩放效果 #

把object换成iframe，然后通过CSS的transform: scale()来视觉上缩放整个页面，让它填满你的容器。举个例子：

<div id="window1" style="width: 100%; border: solid black; overflow: hidden;">
  <iframe src="http://www.example.com" 
          style="width: 120%; height: 100%; transform: scale(0.83); transform-origin: top left; border: none;">
  </iframe>
</div>

这里的scale(0.83)是根据原页面的宽度来算的——假设原页面默认宽度是1200px，你的容器是100%宽度（比如1000px），那缩放比例就是1000/1200≈0.83。你可以根据实际情况调整这个数值，确保页面刚好填满容器。

方法2：使用代理服务（需注意合法性） #

自己搭建一个简单的后端代理，把目标页面的内容拉取到你自己的域名下，这样就符合同源策略了，你就能随便修改页面的样式和宽度。不过要注意，代理别人的网站可能涉及版权问题，一定要确保有合法授权再这么做。

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