Home > Web Front-end > JS Tutorial > JavaScript method to implement frame height changing with content_javascript skills

JavaScript method to implement frame height changing with content_javascript skills

WBOY
Release: 2016-05-16 15:49:11
Original
1212 people have browsed it

The example in this article describes the method of using JavaScript to change the height of the frame with the content. Share it with everyone for your reference. The details are as follows:

There are two methods:

1. Change through the parent page

Here we need to understand the two attributes of the framework, contentWindow and contentDocument. The meaning of these two attributes is similar to that of window document. The difference is that contentWindow is supported by all browsers, but contentDocument is not supported by ie6 and 7, nor is chrome.

<iframe onload="change_height()"></iframe>
function change_height(){
  var iframe=document.getElementById("iframe_id");
  //取得框架元素
  var i_height=iframe.contentWindow.document.body.scrollHeight||iframe.contentWindow.document.documentElement.scrollHeight;
  //取得框架内容的高度
  iframe.height=i_height;
  //改变
}

Copy after login

Second, through content changes

Proceed on the content page

window.onload=function(){
  var iframe=parent.document.getElementById("iframe_id");
  //取得框架元素
  iframe.height=document.body.scrollHeight||document.documentElement.scrollHeight;
  //取得框架内容的高度并改变
}

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template