【JS】测试：HTML页面引入另一个HTML页面，同名ID会冲突吗_html/css

【JS】测试：HTML页面引入另一个HTML页面，同名ID会冲突吗_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:37:40

原创

1580人浏览过

今天被问到一个问题，就是当页面html页面引入了另外一个html页面，恰好2个页面具有相同的id，那么需要用id来处理一些行为的时候会发生冲突或者报错吗？

我用了iframe来引入另外一个HTML页面。

先准备好材料：1个HTML页面（含iframe标签，我命名为test.html），再加一个HTML页面（作为iframe页面的src源，这个页面我命名为iframe.html）。两个页面的内容分别如下：

test.html:

立即学习“前端免费学习笔记（深入）”；

白瓜面试

白瓜面试 - AI面试助手,辅助笔试面试神器

查看详情

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>测试</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"></head><body>    <p id="sameId">这是测试页</p>    <p>这是测试页哦</p>    <p>这是测试页啊</p>    <iframe src="iframe.html" width="400" height="400" scrolling="no"></iframe>    <script type="text/javascript">    window.onload=function(){    	var getId=document.getElementById('sameId');    	getId.style.color='red';    };    </script></body></html>

登录后复制

立即学习“前端免费学习笔记（深入）”；

iframe.html:

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>iframe内容页</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"></head><body>    <p id="sameId">这是iframe内容页</p>    <p>这是iframe内容页哦</p>    <p>这是iframe内容页啊</p></body></html>

登录后复制

测试结果：

立即学习“前端免费学习笔记（深入）”；

结果显示，iframe框架页面里同样被标记为id="sameId"的段落字体颜色并没有变成红色，所以即使引入了另一个html页面，两个页面的id相同也不会发生冲突。

PS：这只是使用iframe方法嵌入另一个网页的测试，其他的方法我还没有尝试哟。

Author:致知

Sign:路漫漫其修远兮，吾将上下而求索。