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

原创于 2015-08-31 21:43:04 发布 · 5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#引入另一个页面 #相同ID #ID是否冲突

Web前端专栏收录该内容

51 篇文章

订阅专栏

探讨HTML页面间共享ID时引入iframe的解决方案，通过实际案例演示如何避免ID冲突，确保页面元素正确加载。

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

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

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

test.html:

<!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>

测试结果：