jQuery load()，html include，iframe嵌框

前提：html文件引入html文件的方法，load()方法；include标签的使用方法；

html文件引入其它html文件的几种方法：

1、load()

语法：

$("#page").load("new.html");

JS代码参考：

<body>
    <div id="page1"></div>
    <div id="page2"></div>
    <script>
        $("#page1").load("page1.html");
        $("#page2").load("page2.html");
    </script> 
</body>

提示：

可以设置容器div的宽高位置样式等，让加载的html页面显示需要的位置；

2、include

include是在a.html里面嵌入b.html的代码，是将代码拼凑完整；

由于在windows系统里面使用html include必须打开iis，这个需要在电脑系统中配置，个人认为并不好；

<!-- 被包含文件与父文件存在于相同目录中。 -->
<!-- #include file="inc/include1.html" -->
<!-- 被包含文件位于脚本虚拟目录中。 --> 
<!-- #include virtual = "inc/include1.html" -->（常用）

3、iframe嵌框架方式

html代码：

// src：内框架的地址，可以使页面地址，也可以是图片的地址。
// frameborder：是否显示边框，1(yes),0(no)
// height：框架作为一个普通元素的高度，建议在使用css设置。
// width：框架作为一个普通元素的宽度，建议使用css设置。
// name：框架的名称，window.frames[name]时专用的属性。
// scrolling：框架的是否滚动。yes,no,auto。
// src：内框架的地址，可以使页面地址，也可以是图片的地址。（嵌套页面重点）
<iframe id="content" width="100%" height="100%"></iframe>

js代码：

<script>
    $("#content").attr("src","new.html");
</script>

最后

现在是单页面的时代，使用加载html的方法并不是好的解决方案，所以大家可以根据自己的需求来选择；

include：感谢作者：https://blog.csdn.net/wild_cowboy/article/details/79917981

jQuery load()，html include，iframe嵌框

猜你喜欢