隱藏的iframe載入的頁面獲取寬高為0問題

2021-08-30 13:31:15 字數 775 閱讀 1757

由於初始化的時候有些iframe是隱藏的,當iframe被置為顯示的時候,內部載入頁面獲取寬高為空。

由於無法獲取寬高我們就沒有辦法根據頁面寬高初始化圖表元素。

有的版本瀏覽器只要**初始化iframe不是隱藏,使用js隱藏的 也是沒有問題。

解決問題思路:

1、判斷圖表所在頁面寬高,小於等於0的時候,出乙個固定的初始化值。

這樣可以解決問題,但是 每乙個頁面都要加判斷。

$(function())
2、基於上乙個解決問題思路,寫乙個功能方法每乙個頁面都載入呼叫。

該方法裡新增判斷,這是上乙個方案的公升級版。

頁面

var winheight,winwidth;

$(function())

//其他頁面引用即可

3、在頁面初始化的時候現實內容,等300秒再使用js隱藏掉,這樣有乙個問題就是載入慢的時候可能也會出問題。並且頁面iframe多的時候也會有問題。

settimeout(function() ,300);
4、根據3的思路可以加乙個iframe的onload方法,這樣在載入完成後隱藏掉。這樣的是多個的時候需要判斷一下,完成乙個隱藏乙個。

parent頁面 

function iframecall()

sub頁面

$(function());

第3和第4種方法會看到隱藏的內容,如果可以接受可以選擇這種方式。

ExtJs非Iframe框架載入頁面實現

p style height 100 載入頁面的控制項的高度和寬度自適應 由於這種使用autoload模式載入進來的頁面是不能隨著瀏覽器的大小變化而變化的。所以我們要實現瀏覽器的大小變化函式,即window.onresize事件。但是在實現這個事件的時候,一定要加上settimeout來控制它,讓其...

解決iframe載入頁面出現白屏閃爍問題

今天維護公司的乙個老專案,專案是乙個公共頁面iframe充當類似vue的router view,通過這個iframe來切換不同頁面。但是在切換或者重新整理的時候,會出現白屏閃爍問題,使用者體驗非常不好!而且由於專案需要適配2k,4k,8k屏,所以使用了rem單位,而使用rem會導致頁面在開始載入的一...

解決iframe載入頁面出現白屏閃爍問題

在這個css檔案裡面新增以下 你會發現,原來頁面切換可以這樣如絲般順滑 body keyframes page fade in 100 當然如果你想更逗比一點,那就引入animate.css,挑幾個逗比的入場動畫,或者自己寫也行。keyframes page scale up 100 keyfram...