将外部页面加载到 DIV 中，并将外部页面样式表的效果限制在该 DIV 中答案

【问题标题】：Load external page into a DIV, and confine the effects of the external page's stylesheet to that DIV将外部页面加载到 DIV 中，并将外部页面样式表的效果限制在该 DIV 中
【发布时间】：2017-01-03 12:36:02
【问题描述】：

假设您有一个包含两个主要部分的页面：

<div id='section_1'>[various content]</div>
<div id='section_2'></div> <!-- an external site will be loaded into this div -->

通过使用 section_1 中的表单，用户可以将其他网站的内容加载到 section_2 中（即用户输入外部 URL，点击“提交”按钮，然后加载内容）。当用户请求将外部站点加载到 section_2 中时，会进行 ajax 调用，将外部站点的代码下载到服务器端，并将外部站点的代码发送到目标 div（即 section_2）。外部站点的代码将包括脚本、CSS 等。

有没有办法将外部网站的 CSS 样式表的效果限制在 section_2 上，并防止这些样式表对 section_1 和页面的任何其他部分产生任何影响？

【问题讨论】：

<iframe> 会工作吗？
@RyanHu - 由于跨域问题，我正在避免使用 iframe。
由于 CORS 限制，您甚至无法获得很多页面。除此之外，对其他内容进行隐藏是可能的，但并非易事，但您也可能遇到许多问题，例如不正确的图像或字体或 @import 路径。对此没有简单的答案，但可以通过大量工作和编写复杂的代理来完成
也许使用 Ajax 和一个独特的样式表来加载页面

标签： javascript jquery html css

【解决方案1】：

如何使用对象标签来显示外部页面。

<object type="text/html" data="your_url_here" >
    </object>

【讨论】：