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

JavaScript method to implement frame height changing with content_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:49:111188browse

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;
  //改变
}

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;
  //取得框架内容的高度并改变
}

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

Statement:
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