在多个页面使用同一个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 相关文章推荐
Javascript 面向对象 继承
May 13 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
php 中的closure用法详解
2017/06/12 PHP
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Python解析树及树的遍历
2016/02/03 Python
Python类的动态修改的实例方法
2017/03/24 Python
Python实现的堆排序算法示例
2018/04/29 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
想学画画?python满足你!
2020/12/24 Python
基于Python实现天天酷跑功能
2021/01/06 Python
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
改革共识倡议书
2014/08/29 职场文书
意向协议书
2015/01/27 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
python编程项目中线上问题排查与解决
2021/11/01 Python