防止注入的页面在父页面中更改样式

Question

我有一个非常简单的测试页面布局：

<div id="nav">Some content here</div>

<div id='siteloader'></div>

使用一些AJAX我加载了http://www.example.com/的内容（字面意思是本页）  在 #seleloader 。 我在我的服务器上加载了带有PHP脚本的页面，因此同源策略没有问题

http://www.example.com/有一些样式，如下所示

div {
    width: 600px;
    margin: 5em auto;
    padding: 50px;
    background-color: #fff;
    border-radius: 1em;
 }

现在，当我在#siteloader中加载http://www.example.com/的内容时，上述样式也会应用于 #nav 。

如何防止注入的页面覆盖我的文档样式？加载文档的样式只需要应用于#siteloader

的内容

Answer 1

在您从example.com获取所有数据之后，您可以在siteloader中尝试这样的事情：

$("#siteloader style").remove();

另外，为了您自己的利益，还有一个名为nav的html5标签，它与div id =“nav”相同，但它们在为您的网页编制索引时对网页抓取工具有利。

编辑：我编辑了“#seleloader style”，这意味着只删除了siteloader中的样式标记。

〜安德鲁

Answer 2

除非/ scoped styles支持广泛的浏览器，否则您的问题没有简单的解决方案。如果您愿意依赖JavaScript库，则couple plugins可以模拟作用域样式。