在多个页面使用同一个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与vbscript数据共享
Jan 09 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
js 三级关联菜单效果实例
Aug 13 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 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
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
wxPython实现列表增删改查功能
2019/11/19 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
入党积极分子评语
2014/05/04 职场文书
个人自查自纠材料
2014/10/14 职场文书
营业员岗位职责
2015/02/11 职场文书
大学生入党自荐书
2015/03/05 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
详解Mysql和Oracle之间的误区
2021/05/18 MySQL