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框架的代碼結構清晰,組件化可以消除很多重復代碼。達到復用的目的

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML框架(iframe )限制 HTML的內聯框架(iframe) HTML - 框架iframe html框架iframe與frameset的介紹 HTML框架集之Frameset與Iframe簡單應用 html中的框架frameset和frame及iframe HTML框架(frameset框架集和iframe內嵌框架) HTML標簽天天練6--