Home Web Front-end JS Tutorial Iframe highly adaptive solution when accessing web pages in file mode_javascript skills

Iframe highly adaptive solution when accessing web pages in file mode_javascript skills

May 16, 2016 pm 05:43 PM
Adaptive

Recently, I have solved the problem of highly adaptable iframes. I searched for many solutions on the Internet, but in summary, there are only a few. I tried these solutions one by one, and finally found that none of them worked in my project. Later I found that I did The web page is accessed through the file method. Put the web page code under apache and access it through the http protocol. When the iframe is loaded, call the following js method:

Copy code The code is as follows:

functionSetWinHeight(obj)
{
varwin= obj;
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;
}
}
}

Sure enough, the height of the webpage can be adapted (it should also be effective for other solutions, I didn’t pay attention to try it), and the same code log for accessing the webpage through the file method is always in the log Report: UnsafeJavaScriptattempttoaccessframewithURLfile:///E:/workspace/html5/exam.htmlfrom
framewithURLfile:///E:/workspace/html5/quiz_preview.html.
Domains, protocols and ports must match.
Each solution The error reported when I tried was this. I could only solve this problem. Later I found that cross-domain access via file is not allowed by Chrome by default. I also checked how to set Chrome to allow cross-domain access: the simplest method. Right-click on the chrome icon, properties-> add '--disable-web-security' after the target

Restart chrome and open the web page you want to adjust, and the problem is solved
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1269
29
C# Tutorial
1248
24
How to configure content adaptive brightness on Windows 11 How to configure content adaptive brightness on Windows 11 Apr 14, 2023 pm 12:37 PM

Adaptive brightness is a feature on Windows 11 computers that adjusts the brightness level of your screen based on the content being displayed or lighting conditions. Since some users are still getting used to Windows 11's new interface, Adaptive Brightness can't be easily found, and some even say the Adaptive Brightness feature is missing on Windows 11, so this tutorial will clear it all up. For example, if you're watching a YouTube video and the video suddenly shows a dark scene, Adaptive Brightness will make the screen brighter and increase the contrast level. This is different from auto-brightness, which is a screen setting that allows your computer, smartphone, or device to adjust brightness levels based on ambient lighting. There is a special one in the front camera

How to build an adaptive mobile interface with Vue? How to build an adaptive mobile interface with Vue? Jun 27, 2023 am 11:05 AM

With the popularity of mobile Internet, more and more websites and applications need to consider the mobile experience. As a popular front-end framework, Vue has responsive layout and adaptive capabilities, which can well help us build adaptive mobile interfaces. This article will introduce how to use Vue to build an adaptive mobile interface. Using rem instead of px as the unit and using px as the unit in the mobile interface may result in inconsistent display effects on different devices. Therefore, it is recommended to use rem instead of px as the unit. rem is relative

How to implement adaptive image size using CSS Viewport units vmin and vw How to implement adaptive image size using CSS Viewport units vmin and vw Sep 13, 2023 am 08:18 AM

How to use CSSViewport units vmin and vw to implement adaptive image size. In web design, we often encounter situations where images need to adapt to the screen size. To achieve this goal, CSS provides a powerful unit - the viewport unit. Among them, vmin represents the percentage of the smaller side of the viewport width, and vw represents the percentage of the viewport width. Therefore, we can use these two units to achieve the effect of adaptive image size. The specifics will be introduced below

Can vue be adaptive? Can vue be adaptive? Dec 30, 2022 pm 03:25 PM

Vue can achieve self-adaptation. The methods to achieve self-adaptation are: 1. Install the "scale-box" component through the "npm install" or "yarn add" command, and use "scale-box" to achieve adaptive scaling; 2. Through Set the device pixel ratio to achieve self-adaptation; 3. Set the zoom attribute through JS to adjust the zoom ratio to achieve self-adaptation.

CSS Viewport: How to use vmax and vw to implement adaptive text width CSS Viewport: How to use vmax and vw to implement adaptive text width Sep 13, 2023 am 10:16 AM

CSSViewport: How to use vmax and vw to implement adaptive text width. With the popularity of mobile devices, responsive design has become an important concept in web design. Among them, adaptive text width to maintain consistent display effects under different screen sizes is an important technology. This article will introduce how to use CSSViewport units, especially vmax and vw units, to implement adaptive text width. In addition to theoretical explanations, we will also provide specific

How to create a responsive website layout using HTML, CSS and jQuery How to create a responsive website layout using HTML, CSS and jQuery Oct 27, 2023 am 11:06 AM

How to create an adaptive website layout using HTML, CSS, and jQuery In today’s Internet age, adaptive layout of websites has become an essential requirement. The adaptive layout of the website can enable the website to display a good user experience on different devices and adapt to devices of different screen sizes, such as computers, tablets, and mobile phones. This article will introduce how to use HTML, CSS and jQuery to create a responsive website layout, and provide specific code examples. Create website skeleton using HTML

Adaptive Server in PHP8.0 Adaptive Server in PHP8.0 May 14, 2023 pm 01:10 PM

On November 26, 2020, the PHP team officially released the PHP 8.0 version. Compared with the previous version, PHP 8.0 brings many new features and improvements. One of the features worthy of attention is the adaptive server. This article will introduce the concept of adaptive server in PHP8.0 and its advantages. In previous PHP versions, developers could use PHP's own server (such as PHP-FPM, Apache) to run their own code. However, the disadvantages of these servers

Implement adaptive website design using PHP Implement adaptive website design using PHP Jun 22, 2023 pm 05:50 PM

Website design is becoming more and more important in the current Internet era. Designers and developers must consider issues such as different device resolutions, different screen sizes, and different operating systems. And these variables make website adaptability even more necessary. PHP is a popular programming language that can be used to develop responsive websites. In this article, we’ll introduce ways to implement responsive website design using PHP and provide a few practical tips. What is responsive website design? Adaptive website design refers to the

See all articles