HTML模板与iframe框架

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框架的代码结构清晰，组件化可以消除很多重复代码。达到复用的目的

 

 

转载于:https://www.cnblogs.com/momoweiduan/p/8149576.html