2017-08-01 55 views
4

我正在嘗試獲取iframe的(https://booking.yourdomain.comhttps://www.yourdomain.com)內容,因此我可以將其設置爲高度。因此,所有的內容是可見的,像這樣(我把表情從here):當域名和協議匹配時獲取iframe內容的高度,但子域名不是

var booking_iframe = document.querySelector('iframe'); 

booking_iframe.onload = function() { 
    booking_iframe.style.height = booking_iframe.contentWindow.document.body.offsetHeight + 'px'; 
} 

但是,這激發了以下錯誤:

VM389:1 Uncaught DOMException: Blocked a frame with origin "https://www.yourdomain.com" from accessing a cross-origin frame. 
    at <anonymous>:1:54 

域和協議匹配,但子域名沒有,

有什麼建議嗎?

(如果你想和德調試器玩我創建了一個test.html只有在生產環境中的iframe)

CNC中

作爲一種變通方法: 任何想法如何使滾動在iframe的內容上? (試過固定的高度和溢出滾動和滾動=「是」,但將無法正常工作)

+0

域名不匹配。就同​​源策略和跨源限制而言,「子域」的概念並不存在。就瀏覽器而言,您所處理的內容與兩個不匹配的域完全相同 - 「https://www.yourdomain.com」vs「https://some.compreviously」。 other.site.com' – sideshowbarker

+0

你是什麼意思「啓用iframe的內容滾動」?在我看來,它是默認啓用的(見[jsfiddle](http://jsfiddle.net/ConnorsFan/5s4u7bz9/);在Windows,Chrome和Firefox中測試)。 – ConnorsFan

+0

我檢查問題(test.html)中的鏈接,你會發現它不是我的情況。 –

回答

1

相同的起源的原因,爲什麼瀏覽器阻止。

爲了規避這個問題,加上JS的下面一行到兩個,包含的iframe頁面,即在iframe中加載頁面:

document.domain = "yourdomain.com"; 

有關詳細信息,請參閱https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Changing_origin

編輯:爲了根據其內容調整iframe的大小,我推薦iframe-resizer

+0

如果你檢查我的test.html的源代碼,我已經在做我的部分。另一個子域它是一個c-name記錄,我無法訪問它.. –

+0

在https://www.islamallorca.com/booking-test.html的源代碼中,我看到'window.domain ='islamallorca。 com';'而不是'document.domain ='islamallorca.com';'。請嘗試**文檔**。域。 然後確保這行代碼也存在於加載到iframe中的頁面中。目前,它在嵌入式頁面(iframe src,例如https://booking.islamallorca.com:4475/fwbookingresponsivestep/...)中仍然缺失。 – pwagner

+0

確實,我犯了一個錯誤,並將屬性設置爲窗口!事情是我改變了我的代碼('booking_iframe.contentWindow.document.body.offsetHeight +'px'; //返回150px,但內容更大')仍然返回iframe高度(不是它的內容)。任何想法如何得到它?謝謝! –