Iframe practical operations collection _ javascript tips-js tutorial

This article mainly introduces the practical operations on iframe, including height and data transmission. If you are interested, you can refer to setting the iframe height to the height of the subpage.

The Code is as follows:

// Jquery is required
$ (Document). ready (function (){
Parent.doc ument. getElementById ("ifPage"). style. height = document. body. scrollHeight + "px ";
});

Iframe highly adaptive to the parent page

The Code is as follows:

// Jquery is required
$ (Window). resize (function (){
Var webheight = document. body. clientHeight-X; // X indicates the height to be subtracted, for example, the height of the top navigation bar.
$ ("# IfPage"). attr ("style", "height:" + webheight + "px ;");
});
$ (Window). load (function (){
Var webheight = document. body. clientHeight-105;
$ ("# IfPage"). attr ("style", "height:" + webheight + "px ;");
});

Transfer elements between parent and child pages
The parent page obtains the data in the Child page. JS code:

The Code is as follows:

// Obtain the object based on the iframe id
Var i1 = window. frames ['iframeid'];
// Var iframe = window. frames [0]; or
// Obtain the element value in iframe
Var valpolici1.doc ument. getElementById ("t1"). value

The child page obtains data from the parent page. JS code:

The Code is as follows:

Var val = parent.doc ument. getElementById ("txt1 ");

Transmission between subpages and subpages. JS code:

The Code is as follows:

Var i1 = parent. window. frames ['iframeid'];
Var val = i1.document. getElementById ("text1"). value;

Refresh parent page

The Code is as follows:

Function parentReload () {window. parent. location. reload ();}

Reload the subpage

The Code is as follows:

Iframe. Attributes ["Src"] = "ItemTQEditorPage. aspx ";