html使用共同的頭部導航

寫公司官網時,發現導航和輪播每一個頁面都有,首先想到的是用vue的路由來實現,後來考慮到seo的問題,需要用到nuxt,後來想了比較麻煩就沒有用,然後想到了了iframe(但是iframe有阻塞頁面的加載等缺點,沒有使用)
下面還是說一下iframe自動適應高度的問題
子頁面添加如下代碼:

    var oIframe = window.top.document.getElementById("mainiframe");
    var oBody = document.getElementsByTagName("body")[0];
    oIframe.style.height = oBody.offsetHeight + 'px';

如果主頁面的iframe是動態的,主頁面需要添加如下代碼:

   function loadPage(path) {
        document.getElementById("mainiframe").src = path

    }

最後還是使用了jq 的load
但是load在本地訪問的時候會出現跨域問題,需要放在服務器上訪問,不然報錯如下:
html使用共同的頭部導航
load方法如下:

   function loadPage(path) {
        $('.page').load(path)
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章