ホームページ > ウェブフロントエンド > jsチュートリアル > jquery ajax application_javascriptスキルにおけるiframe適応高さの問題の解決策

jquery ajax application_javascriptスキルにおけるiframe適応高さの問題の解決策

WBOY
リリース: 2016-05-16 16:52:35
オリジナル
971 人が閲覧しました

iframe の適応高さ自体は非常に単純な方法で、ページが読み込まれた後に高さを再計算します。

コードは次のとおりです:

コードをコピーしますコードは次のとおりです:

//パブリック メソッド: すべてのデータが表示されるように iframe の高さを設定します
//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;
}
}
}
//ページ分割時に iframe の高さをリセットします ; 変更後: iframe.name = iframe.id
var reSetIframeHeight = function()
{
try {
var oIframe =parent.document. getElementById(window.name);
oIframe .height = 100 ;
} catch (err2) { ;

しかし、jquery ajax を使用してデータをリクエストする別の状況があり、本体のロードが完了した後、データはまだ http リクエストを行っており、この時点ではウィンドウの高さを占めるデータはなく、reSetIframeHeight メソッドが使用されます。高さを計算できません。

このとき、私たちはメソッドを考えます: ajax はいつ実行できるでしょうか? もちろん、Complete イベントは実行が完了したときです。

しかし、各ページの ajax Complete イベントに処理を追加することはできません。ここではjquery ajaxのグローバル変数を使用します。

ajax と iframe の適応を処理するコード:

コードをコピー

コードは次のとおりです:

var sendcount = 0;
var completecount = 0;

//Ajax グローバル イベント処理を追加します。 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 () {
});

最初に reSetIframeHeight を実行し、各 ajax が完了した後に呼び出します。 IframeHeight を再設定します。

テスト済みで有効です。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート