码迷,mamicode.com
首页 > Web开发 > 详细

HTML模板与iframe框架

时间:2017-12-30 14:33:22      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:prototype   模块   new   font   rip   vue.js   html模板   pos   parent   

HTML模板

----------------------------------------------------------

HTML模板技术用来渲染数据,可以重复使用模板,用来简化前端页面代码。在使用数据时,只需要将数据替换模板中字符即可。

<!--1. html -->

<div id="temp"></div>

 <!--2. html模板 -->

<script  type="text/template" id ="template">

        <div>

            <table>

                <tr><th>val_1</th></tr>

                <tr><td>val_2</td></tr>

                <tr><td>val_3</td></tr>

            </table>

        </div>

</script>

<!-- js方法 -->

<script>

//替换方法

String.prototype.replaceAll= function(s1,s2) {

    return this.replace(new RegExp(s1,"gm"),s2);

};

 

$(document).ready(function(){

    var html=$("#template").html(); //获取模板内容

    html=html.replaceAll("val_1","替换_1"); //替代模板内容

    html=html.replaceAll("val_2","替换_2");

    html=html.replaceAll("val_3","替换_3");

    $("#temp").append(html);   //组装模板到html中

});

</script>

 

 

iframe框架

----------------------------------------------------------

iframe嵌套框架,将其他页面嵌套在主页面中,也可以达到将其他功能模块复用的目的。

A.html页面(父页面)

<!--1. html -->

<div id="iframe">这是A页面的内容</div>

    <iframe src="B.html" width="100%" height="100%" id="B" name="iframeName"            frameborder="0">

</iframe>  

<!--2. js -->

iframeName.window.yyy();    //iframeName为html中<iframe>标签中name属性的属性值,yyy为子页面中js方法

 

B.html页面(子页面)

<!--1. html -->

<div>

        <table>

            <tr><th>这是B页面内容</th></tr>

            <tr><td>模板二</td></tr>

            <tr><td>模板三</td></tr>

        </table>

</div>

<!--2. js -->

parent.xxx();   //xxx为父页面的js方法

 目前前端的框架很多,最火的莫过于Vue.js框架了。Vue框架的代码结构清晰,组件化可以消除很多重复代码。达到复用的目的

 

 

HTML模板与iframe框架

标签:prototype   模块   new   font   rip   vue.js   html模板   pos   parent   

原文地址:https://www.cnblogs.com/momoweiduan/p/8149576.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!