js实现一个包含javascript的index.html页面引入另一个html页面 可是css不要影响到
时间: 2024-10-06 16:04:01 浏览: 37
一个用weui+html+css页面的例子
在JavaScript中,如果你想在一个`index.html`页面中引入另一个HTML页面,并且希望CSS不会相互影响,你可以使用iframe元素。iframe允许你在当前页面嵌入另一个文档,但是它默认会应用其自身的样式,不会影响主页面的CSS。以下是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style> /* 主页面的CSS */
body { background-color: white; }
</style>
</head>
<body>
<h1>主页面内容</h1>
<!-- 使用iframe引入外部页面 -->
<iframe id="embeddedPage" src="other_page.html" style="display:none;"></iframe>
<button onclick="showIframe()">显示其他页面</button>
<script>
function showIframe() {
document.getElementById('embeddedPage').style.display = 'block';
}
</script>
</body>
</html>
```
在这个例子中,`other_page.html`的内容不会影响`index.html`的样式,除非你明确地在`other_page.html`中添加了覆盖主页面样式的CSS。通过点击按钮,你可以在页面上展示`other_page.html`。
阅读全文