在多个页面使用同一个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 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
Javascript 复制数组实现代码
Nov 26 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
JavaScript常用8种数组去重代码实例
Sep 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
php简单中奖算法(实例)
2017/08/15 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
react以create-react-app为基础创建项目
2018/03/14 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
python多重继承新算法C3介绍
2014/09/28 Python
Python创建xml的方法
2015/03/10 Python
python清理子进程机制剖析
2017/11/23 Python
python实现简单图片物体标注工具
2019/03/18 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
学习Python需要哪些工具
2020/09/04 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
创意活动策划书
2014/01/15 职场文书
经典商业广告词
2014/03/13 职场文书
旷工检讨书1000字
2015/01/01 职场文书
自我评价优缺点范文
2015/03/11 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
创业计划书之宠物店
2019/09/19 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis