在多个页面使用同一个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 相关文章推荐
使用js修改客户端注册表的方法
Aug 09 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
vue实现搜索过滤效果
May 28 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
Zend公司全球首推PHP认证
2006/10/09 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
laravel安装和配置教程
2014/10/29 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
详解react-redux插件入门
2018/04/19 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python中readline判断文件读取结束的方法
2014/11/08 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
python之拟合的实现
2019/07/19 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
红领巾心向党广播稿
2014/01/19 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
信息工作经验交流材料
2014/05/28 职场文书
运动员加油词
2015/07/18 职场文书
2019银行竞聘书
2019/06/21 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
AI:如何训练机器学习的模型
2021/04/16 Python
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL