在多个页面使用同一个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表单提交的代码
Sep 13 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
node通过npm写一个cli命令行工具
2017/10/12 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
py中的目录与文件判别代码
2008/07/16 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
美国五金商店:Ace Hardware
2018/03/27 全球购物
护士专业推荐信
2013/11/02 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
火烧圆明园观后感
2015/06/03 职场文书
禁毒主题班会教案
2015/08/14 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
Golang实现可重入锁的示例代码
2022/05/25 Golang