Home Web Front-end JS Tutorial Solution to iframe adaptive height problem in jquery ajax application_javascript skills

Solution to iframe adaptive height problem in jquery ajax application_javascript skills

May 16, 2016 pm 04:52 PM
ajax iframe jquery

iframe adaptive height itself is a very simple method, which is to recalculate the height after the page is loaded.

The code is as follows:

Copy codeThe code is as follows:

//Public method: Setting The height of the iframe to ensure that all data is displayed
//function SetPageHeight() {
// var iframe = getUrlParam('ifname');
// var myiframe = window.parent.document.getElementById(iframe );
// iframeLoaded(myiframe);
//}
var iframeLoaded = function (iframe) {
if (iframe.src.length > 0) {
if (! iframe.readyState || iframe.readyState == "complete") {
var bHeight =
iframe.contentWindow.document.body.scrollHeight;
var dHeight =
iframe.content Window.document.documentElement .scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}
}
}
//Reset the iframe height when paginating ; After modification: iframe.name = iframe.id
var reSetIframeHeight = function()
{
try {
var oIframe = parent.document.getElementById(window.name);
oIframe .height = 100; 00 ;
           } catch (err2) {                                                                                                                                                                       ;

But there is another situation where jquery ajax is used to request data. After the body load is completed, the data is still making an http request. At this time, there is no data occupying the window height, and the reSetIframeHeight method cannot calculate the height.

At this time, we think of a method: when can ajax be executed? Of course, the Complete event is when the execution is completed.

But we cannot add processing to the ajax Complete event in each page. The global variables of jquery ajax are used here.

Code to handle ajax and iframe adaptation:

Copy code

The code is as follows:

var sendcount = 0;
var completecount = 0;

//Add ajax global event processing. reSetIframeHeight();$(document).ajaxStart(function (a, b, c) {}).ajaxSend(function (e, xhr, opts) { sendcount ;}).ajaxError(function (e, xhr, opts) {}).ajaxSuccess(function (e, xhr, opts) {
}).ajaxComplete(function (e, xhr, opts) {
completecount ;
reSetIframeHeight();

}).ajaxStop(function () {
});

Execute reSetIframeHeight first, and then after each ajax is completed Call reSetIframeHeight.

Tested and valid.
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 Article Tags

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)

How to get variables from PHP method using Ajax? How to get variables from PHP method using Ajax? Mar 09, 2024 pm 05:36 PM

How to get variables from PHP method using Ajax?

How to use PUT request method in jQuery? How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery?

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

jQuery Tips: Quickly modify the text of all a tags on the page

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Use jQuery to modify the text content of all a tags

PHP vs. Ajax: Solutions for creating dynamically loaded content PHP vs. Ajax: Solutions for creating dynamically loaded content Jun 06, 2024 pm 01:12 PM

PHP vs. Ajax: Solutions for creating dynamically loaded content

Understand the role and application scenarios of eq in jQuery Understand the role and application scenarios of eq in jQuery Feb 28, 2024 pm 01:15 PM

Understand the role and application scenarios of eq in jQuery

PHP and Ajax: Ways to Improve Ajax Security PHP and Ajax: Ways to Improve Ajax Security Jun 01, 2024 am 09:34 AM

PHP and Ajax: Ways to Improve Ajax Security

How to tell if a jQuery element has a specific attribute? How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute?

See all articles