首頁 web前端 js教程 file模式訪問網頁時iframe高度自適應解決方案_javascript技巧

file模式訪問網頁時iframe高度自適應解決方案_javascript技巧

May 16, 2016 pm 05:43 PM
自適應

最近做到iframe的高度自適應這個問題,網路上一搜好多解決方案,而總結起來也就那幾種,我逐一嘗試這些方案,最後發現在我的專案中都不起作用,後來發現自己做的網頁是透過file方式存取的,將網頁程式碼放到apache下透過http協定訪問,在iframe載入的時候呼叫如下js方法:

複製程式碼 程式碼如下:

functionSetWinHeight(obj)
{ var;
if(document.getElementById)
{
if(win&&!window.opera)
{
if(win.contentDocument&&win.contentDocument.body.offsetHeight)
win.height= win.contentDocument.body.offsetHeight;
elseif(win.Document&&win.Document.body.scrollHeight)
win.height=win.Document.body.scrollHeight;
}
}
}
}

果然網頁高度能夠自適應(對於其他方案應該也有效果,我沒有註意去嘗試),而通過file方式訪問網頁同樣的代碼log中始終報:UnsafeJavaScriptattempttoaccessframewithURLfile :///E:/​​workspace/html5/exam.htmlfrom
framewithURLfile:///E:/​​workspace/html5/quiz_preview.html.
Domains,protocolsandportsmustmatch.
每個方案都嘗試了報的錯是這個,只能從這個問題下手解決了,後來發現這種通過file方式跨域訪問的方式chrome是默認不允許的,又查如何設置chrome允許跨域訪問:最簡單的方法在chrome圖標右鍵、屬性->目標在後面加入'--disable-web-security'

重新啟動chrome開啟要調的網頁,問題果然解決了
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1269
29
C# 教程
1248
24
如何在 Windows 11 上設定內容自適應亮度 如何在 Windows 11 上設定內容自適應亮度 Apr 14, 2023 pm 12:37 PM

自適應亮度是 Windows 11 電腦上的功能,可根據顯示的內容或照明條件調整螢幕的亮度等級。由於部分使用者仍在習慣 Windows 11 的新介面,因此無法輕鬆找到自適應亮度,甚至有人說 Windows 11 上的自適應亮度功能缺失,所以本教學將把所有內容都弄清楚。例如,如果您正在觀看 YouTube 影片並且影片突然顯示黑暗場景,自適應亮度將使螢幕更亮並增加對比度等級。這與自動亮度不同,自動亮度是一種螢幕設置,可讓電腦、智慧型手機或裝置根據環境照明調整亮度等級。前置鏡頭有一個特殊的

如何用Vue建構自適應行動端介面? 如何用Vue建構自適應行動端介面? Jun 27, 2023 am 11:05 AM

隨著行動互聯網的普及,越來越多的網站和應用程式需要考慮在行動端的使用體驗。 Vue作為一種流行的前端框架,具有響應式佈局和自適應能力,可以很好地幫助我們建立自適應行動端介面。本文將介紹如何以Vue建構自適應行動端介面。使用rem代替px作為單位在行動端介面中使用px作為單位,可能會導致在不同裝置上的顯示效果不一致。因此,建議使用rem代替px作為單位。 rem是相對

使用 CSS Viewport 單位 vmin 和 vw 實現自適應圖片大小的方法 使用 CSS Viewport 單位 vmin 和 vw 實現自適應圖片大小的方法 Sep 13, 2023 am 08:18 AM

使用CSSViewport單位vmin和vw實現自適應圖片大小的方法在網頁設計中,經常會遇到需要讓圖片自適應螢幕大小的情況。為了實現這一目標,CSS提供了一種強大的單位—viewport單位。其中,vmin表示視口寬高中較小的一方的百分比,而vw表示視口寬度的百分比。所以,我們可以利用這兩種單位來實現自適應圖片大小的效果。以下將介紹具體

vue能實現自適應嗎 vue能實現自適應嗎 Dec 30, 2022 pm 03:25 PM

vue能實現自適應,其實現自適應的方法有:1、透過「npm install」或「yarn add」指令安裝「scale-box」元件,並使用「scale-box」實現適配縮放;2、透過設定設備像素比例實現自適應;3、透過JS設定zoom屬性調整縮放比例來實現自適應即可。

CSS Viewport: 如何使用 vmax 和 vw 來實作自適應文字寬度的方法 CSS Viewport: 如何使用 vmax 和 vw 來實作自適應文字寬度的方法 Sep 13, 2023 am 10:16 AM

CSSViewport:如何使用vmax和vw來實現自適應文字寬度的方法隨著行動裝置的普及,響應式設計已經成為了網頁設計的重要概念。其中,自適應文字寬度在不同螢幕尺寸下保持一致的顯示效果是一項重要的技術。本文將介紹如何使用CSSViewport單位,特別是vmax和vw單位,來實現自適應文字寬度的方法。除了理論解說,我們還會提供具體

如何使用HTML、CSS和jQuery建立一個自適應的網站佈局 如何使用HTML、CSS和jQuery建立一個自適應的網站佈局 Oct 27, 2023 am 11:06 AM

如何使用HTML、CSS和jQuery創建一個自適應的網站佈局在當今互聯網時代,網站的自適應佈局已經成為了一個必不可少的要求。網站的自適應佈局可以使網站在不同設備上展示出良好的用戶體驗,並且適應不同螢幕尺寸的設備,如電腦、平板和手機等。本文將介紹如何使用HTML、CSS和jQuery來建立一個自適應的網站佈局,並提供具體的程式碼範例。使用HTML建立網站骨架首

PHP8.0中的自適應Server PHP8.0中的自適應Server May 14, 2023 pm 01:10 PM

在2020年11月26日,PHP團隊正式發布了PHP8.0版本,相較於先前的版本,PHP8.0帶來了許多新的功能和改進,其中一個值得關注的特點是自適應Server。本文將會介紹PHP8.0中自適應Server的概念以及它的優點。在先前的PHP版本中,開發者可以使用PHP自帶的伺服器(比如說PHP-FPM、Apache)來運行自己的程式碼。不過,這些伺服器的缺點

使用PHP實現自適應網站設計 使用PHP實現自適應網站設計 Jun 22, 2023 pm 05:50 PM

網站設計在當前的網路時代變得越來越重要。設計師和開發人員必須考慮到不同設備的解析度、不同尺寸螢幕以及不同的作業系統等問題。而這些變數讓網站自適應變得更加必要。 PHP是一種流行的程式語言,可以用來開發自適應網站。在本文中,我們將介紹使用PHP實現自適應網站設計的方法,並提供幾個實用的技巧。什麼是自適應網站設計?自適應網站設計是指根據使用者裝置(如手機、平板電

See all articles