使用iframe遇到的問題

彈框後，出現子視窗高度不夠，導致顯示內容不全

使用iframe **如下：

解釋一下，主要是監聽窗體調整，獲取窗體的高度，減去頭部和底部的高度剩下的就是$content的高度，然後給iframe設定高度，**中執行了延遲載入，防止函式執行過快。

高度雖然解決了，但是又出現乙個問題，當彈窗使用全屏顯示的時候，調整窗體寬度，裡面內容不會跟著改變，那麼問題來了出現這種效果：

裡面的內容被覆蓋了，導致這個原因主要是裡面iframe和彈窗內容div的寬度沒有跟著改變，那麼我們怎麼解決呢，想到上一節講了高度設定，那麼我們寬度也跟著設定呀。帶著這個想法，我試一下修改iframe的寬度

function setcontentsize() );
}

結果還是出現上述那個問題，那到底為啥呢？然後通過f12 模式除錯了一下，原來彈框裡面有乙個div也設定了寬度，那我跟iframe一起一併修改呢?

function setcontentsize() 
$content.height($(this).height() - 147);
$content.find('iframe').each(function () );
}.

嘗試了一下果真可以，現在看效果：

這樣終於算解決問題了，有乙個前端小夥伴告訴我還有一種方式，就是改變窗體寬度的時候，呼叫乙個layer.full(index)，index 是建立彈窗的編號。這種方式好處就是內部自動根據窗體寬度調整彈窗寬度，但是有個問題我怎麼去獲取那個index呢？這個問題等以後解決吧，先放放。。。

現在是pc端解決了適配，但是手機端呢，用上述的**顯示的頁面不能左右移動。這下就需要google一把了，帶著問題去搜尋了一下網上大佬說：先給iframe 套乙個div 然後給div設定樣式

@media screen and (max-width: 768px) 
}

結果試了一次果真可以實現，但是由於手機品牌很多，需要適配就難上加難，由於自己又不是乙個前端人員就先放放了，等有時間在跟著上述的問題一起解決。

子視窗高度不夠

iphone下iframe問題記錄