js实现一个html页面引入另一个html页面

1、通过jq的load方法引入

<body>
    <div id="div">
    	<div class="adsLeft">...</div>
    	<div class="adsRight">
    		<div class="header">...</div>
    		<div class="content">...</div>
    	</div>
    </div>
</body>

<script>
    $(".adsLeft").load("/left.html")
</script>

2、原生js的object标签引入

<body>
    <div id="div"></div>
    <script>
          document.getElementById("div").innerHTML = '';
    </script>
</body>

3、iframe引入

<body>
   <div id="div">
        <iframe align="center" width="100%" height="200" src="index.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
   </div>
</body>

4、import引入

<head>
    <meta charset="utf-8" />
    <title>主页面</title>
    <!--import引入-->
    <link rel="import" href="header.html" id="page1"/>
    <link rel="import" href="left.html" id="page2"/>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
</body>
<script type="text/javascript">
    document.getElementById("div1").innerHTML = page1.import.body.innerHTML;
    document.getElementById("div2").innerHTML = page2.import.body.innerHTML;
</script>

你可能感兴趣的:(js,html,jquery)