Question

除了使用iframe之外，还有一种方法可以将外部html页面加载到div而不影响div之外的样式吗？

我现在使用jquery加载，但如果外部html页面定义了body的样式，则指定div之外的页面样式会发生变化。

例如，我想将此页面加载到div

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>TEST</title>
    <link type="text/css" href="styles.css" rel="stylesheet">
    <style>
    body {
        background-color: #DEDEDE; font-size: 96px;
    }
    </style>
</head>
<body>
    <div id="test">
        <p>test</p>
    </div>
</body>
</html>

此页面定义了body的样式，它包含一个外部css文件。（我无法控制页面内容。）

Answer 1

如果您不想影响父页面，则包含的html页面不得包含html / body标签，样式或css包含。

Answer 2

使用ajax代替加载，成功时只需从成功数据html中删除链接标记。

将html页面加载到div而不影响div之外的样式

2 个答案: