layui的iframe跳轉連結與頁面按鈕跳轉相關介紹

2019-11-24   科技i關注

一、導航跳轉iframe頁面問題:

推薦:layui教程

關於layui的iframe嵌套頁面的導航跳轉頁面問題,如下圖所示可以看到效果:

layui的iframe跳轉連結與頁面按鈕跳轉相關介紹

在模板頁的導航代碼:

有沒看到連結那裡多了這個東西:

然後在嵌套的iframe代碼中加:

就是加上這個:name="main_self_frame";然後src跳轉的連結就是剛上面添加的src連結來的.

二.頁面中的按鈕跳轉到其他導航頁面,並高亮顯示

做著做著發現了另外一個問題,就是在你的頁面中有個按鈕,要跳轉到對應的模塊,直接跳轉到對應模塊,你們有沒發現跳轉到的那個模塊,左側的導航並沒相對應的顯示的那個地方高亮,還是默認在原來那個高亮;

效果顯示:

按鈕跳轉之後,另外頁面的導航沒有高亮顯示呀.解決辦法還是有的,要通過js去控制跳轉:

1、首先在按鈕那個頁面html添加:

連結上面加這個類:jump_refresh_url;然後在該頁面js那裡加上:

2、在導航所在的模板頁面添加js:

照上面步驟就能實現效果了,請看下圖效果:

該辦法實現的效果請記得在伺服器端瀏覽喔,直接瀏覽打開按鈕跳轉會報錯的喔,因為iframe之前的操作會存在跨域問題,所以要用localhost等打開,不能直接打開html,比如webstrom都自帶web伺服器的,打開也方便.localhost打開的就行了.

以上就是layui的iframe跳轉連結與頁面按鈕跳轉相關介紹的詳細內容,更多請關注其它相關文章!