在多个页面使用同一个HTML片段的代码


Posted in Javascript onMarch 04, 2011

问题描述
有一个比较复杂的HTML片段(A),如果把这个HTML片段嵌入到其他页面中(B,C,D....)。
问题的关键是在HTML片段中有大量的JavaScript逻辑需要处理,比如说分页,点击事件响应等。

对于这个问题,我们用一个简单的例子来说明:
“页面上有一个按钮,点击此按钮引入一个HTML片段,此HTML片段中有分页按钮。”

1. 使用IFrame
主页面,点击一个按钮向页面引入一个IFrame:

    <script type="text/javascript">
        $(function() {
            $("#clickToInsert").click(function() {
                $("#placeholder").html('<iframe src="iframe.htm"></iframe>');
            });
        });
    </script>
    <input type="button" id="clickToInsert" value="Insert HTML" />
    <div id="placeholder">
    </div>
    IFrame页面,模拟分页的情况: 
    <script type="text/javascript">
        $(function() {
            var parent = $("#complex_page_segment");
            $(".previous", parent).click(function() {
                $(".content", parent).html("Previous Page Content");
            });
            $(".next", parent).click(function() {
                $(".content", parent).html("Next Page Content");
            });
        });
    </script>
    <div id="complex_page_segment">
        <input type="button" value="Previous Page" class="previous" />
        <input type="button" value="Next Page" class="next" />
        <div class="content">
            Page Content</div>
    </div>

2. AJAX返回页面片段,并注册事件
注:我们通过textarea来模拟返回的HTML片段。

    <script type="text/javascript">
        $(function() {
            $("#clickToInsert").click(function() {
                $("#placeholder").html($("#clone").val());
                var parent = $("#complex_page_segment");
                $(".previous", parent).click(function() {
                    $(".content", parent).html("Previous Page Content");
                });
                $(".next", parent).click(function() {
                    $(".content", parent).html("Next Page Content");
                });
            });
        });
    </script>
    <input type="button" id="clickToInsert" value="Insert HTML" />
    <div id="placeholder">
    </div>
    <textarea id="clone" style="display: none;">
    <div id="complex_page_segment">
        <input type="button" value="Previous Page" class="previous" />
        <input type="button" value="Next Page" class="next" />
        <div class="content">Page Content</div>
    </div>
    </textarea>

由于我们需要在多个页面引用同一个HTML片段,这种方法导致大量事情处理被重复性的拷贝粘贴,明显我们需要将公共的方法提取出来。

3. AJAX返回页面片段,并调用页面片段中的函数注册事件

    <script type="text/javascript">
        $(function() {
            $("#clickToInsert").click(function() {
                $("#placeholder").html($("#clone").val());
                init_complex_page_segment();
            });
        });
    </script>
    <input type="button" id="clickToInsert" value="Insert HTML" />
    <div id="placeholder">
    </div>
    <textarea id="clone" style="display: none;">
    <script type="text/javascript">
        function init_complex_page_segment() {
            var parent = $("#complex_page_segment");
            $(".previous", parent).click(function() {
                $(".content", parent).html("Previous Page Content");
            });
            $(".next", parent).click(function() {
                $(".content", parent).html("Next Page Content");
            });
        }
    </script>
    <div id="complex_page_segment">
        <input type="button" value="Previous Page" class="previous" />
        <input type="button" value="Next Page" class="next" />
        <div class="content">Page Content</div>
    </div>
    </textarea>

其实我们可以更进一步,完全没必要手工调用这个函数,而是可以在返回的HTML片段中让其自动执行。

4. AJAX返回页面片段,其事件自动注册

    <script type="text/javascript">
        $(function() {
            $("#clickToInsert").click(function() {
                $("#placeholder").html($("#clone").val());
            });
        });
    </script>
    <input type="button" id="clickToInsert" value="Insert HTML" />
    <div id="placeholder">
    </div>
    <textarea id="clone" style="display: none;">
    <script type="text/javascript">
        $(function() {
            var parent = $("#complex_page_segment");
            $(".previous", parent).click(function() {
                $(".content", parent).html("Previous Page Content");
            });
            $(".next", parent).click(function() {
                $(".content", parent).html("Next Page Content");
            });
        });
    </script>
    <div id="complex_page_segment">
        <input type="button" value="Previous Page" class="previous" />
        <input type="button" value="Next Page" class="next" />
        <div class="content">Page Content</div>
    </div>
    </textarea>

最后一种方法和第一种IFrame的方式是我们所推荐的。
下载源代码
Javascript 相关文章推荐
jQuery 开发者应该注意的9个错误
May 03 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 #Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 #Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 #Javascript
jQuery 操作option的实现代码
Mar 03 #Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 #Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 #Javascript
基于jQuery的简单的列表导航菜单
Mar 02 #Javascript
You might like
thinkphp中memcache的用法实例
2014/11/29 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
python实现定时发送qq消息
2019/01/18 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
JAVA和C++的区别
2013/10/06 面试题
六一儿童节活动策划方案
2014/01/27 职场文书
迎八一活动主题
2014/01/31 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
个人近期表现材料
2014/02/11 职场文书
寒假家长评语大全
2014/04/16 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
关于EntityWrapper的in用法
2022/03/22 Java/Android