微樓書項目總結（一）前端

• IFRAME

動態生成IFRAME

        // 新建IFRAME並設置模板鏈接
        var newIframeObject = document.createElement("IFRAME");
        newIframeObject.src = "panorama.html";
        // 設置顯示寬高
        newIframeObject.width = "500px";
        newIframeObject.height = "500px";
        // 將IFRAME插入指定html
        $('.hxzs_imgshow').empty().append(newIframeObject);
        // IFRAME加載完成後執行
        newIframeObject.onload = function () {
            newIframeObject.contentWindow.update("view//img//houseType1//panorama1.PNG");
        }

IFRAME父級子級聯動

父子級聯動參考文章

示例

子級<script>標籤內嵌方法

        function update(string) {
            xxxxxxxxxxxxxxxxxxxxx
        }

父級調用IFRAME內方法（利用onload方法確認IFRAME完全加載後執行方法）

        // 新建IFRAME並設置模板鏈接
        var newIframeObject = document.createElement("IFRAME");
        newIframeObject.src = "panorama.html";
        // 設置顯示寬高
        newIframeObject.width = "500px";
        newIframeObject.height = "500px";
        // 將IFRAME插入指定html
        $('.hxzs_imgshow').empty().append(newIframeObject);

        // IFRAME加載完成後執行
        newIframeObject.onload = function () {
            // 執行IFRAME內方法
            newIframeObject.contentWindow.update("view//img//houseType1//panorama1.PNG");
        }

• arttemplate

官網文檔

示例

此處在html中預留一個<div id = "content">作爲生成的模板放置的容器，再預留一個<script id="test">作爲模板。

渲染模板先用template('test',data)語句找到模板'test'，並將數據data填充進模板'test'，然後根據容器id獲取到容器，將生成的模板放置進容器裏即可。

arttemplate不能直接迭代數組，如果填充的數據是淡出的數組形式data = [x,x,x,x]，則需要在將數組轉化爲對象才能進行迭代，如{data}，以下面的模板爲例可以直接將list改成data便可進行迭代。