檢測iframe中父網站表單的媒體屏幕大小

我試圖根據父網站（呈現iframe的網站）來更改在不同域上承載的iframe元素的設計。檢測iframe中父網站表單的媒體屏幕大小

我的具體目標是僅更改iframe中針對iPhone 5的一些設計組件（嚴格的iPhone 5）。截至目前，我正在通過傳遞$(window).width()和$(window).height()，然後在加載iframe時將它們作爲查詢參數傳遞給url來獲取寬度和高度。通過這種方式，我可以提前獲得確切的寬度，並根據這一點調整設計元素。

有沒有什麼更好的方法來做到這一點，我不知道，我還是找出究竟如何我將針對iPhone 5

我使用這個迄今爲止的iPhone 5，但沒有運氣：

if (window.matchMedia("@media only screen and (min-device-width : 320px) and (max-device-width : 568px)").matches) { 
    /* jQuery CSS alternations goes here!! */ 
}

注：我和通過jQuery的CSS屬性iframe中應用CSS屬性。因此，檢測應該只在基於寬度的JavaScript或根據您的知識的最佳方式。

謝謝！

來源

2017-01-02 Shashi

你爲什麼不試試userAgents。 navigator.userAget –

@ShoaibKonnur我剛剛通過它，大部分的例子是檢測瀏覽器。你能分享一個屏幕尺寸的例子嗎？ – Shashi

對於JavaScript，如果iframe域相同父域，您可以使用： parent.document.body.clientHeight或parent.document.body.clientWidth

如果您嘗試使用它通過在不同域中的iframe你會得到一個跨站腳本錯誤，出於明顯的安全原因。

如果iframe的域與父級的域不同，則需要使用Window.postMessage()。

來源

2017-01-03 13:14:50

如果數據被提供，我有權訪問域，因此我已經考慮到了CORS問題。 – Shashi

在這種情況下，您可以使用發佈消息將數據從父級傳輸到底部鏈接的iframe。 –

檢測iframe中父網站表單的媒體屏幕大小

回答

相關問題