在多个页面使用同一个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 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
JS实现打砖块游戏
Feb 14 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
如何确保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
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
Angular弹出模态框的两种方式
2017/10/19 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
python3编码问题汇总
2016/09/06 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
愚人节活动策划方案
2014/03/11 职场文书
养牛场项目建议书
2014/05/13 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
党小组意见范文
2015/06/08 职场文书
团拜会主持词
2015/07/04 职场文书
七年级作文之游记
2019/12/11 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL