1

この頭を悩ます問題を解決するための助けがあれば、本当に感謝しています!

  • 1 つのサーバーでホストされている Web サイトがあります。
  • また、別のテクノロジー (QlikView) を使用するため、別のサーバーでホストされている Web ベースのアプリケーションもあります。

私たちが行ったことは、iFrame を使用してアプリケーションを取り込むことにより、アプリケーションが Web サイトの一部であるかのように見せることです。これを行うために使用したコードを以下に示します。

<iframe src="http://www.application_blah.co.uk" width="1190px" height="900px" style="margin: 17px 0 0 -10px; border:none;" scrolling="no" ></iframe>

これはうまくいきます。ただし、アプリケーションの読み込みには 20 秒ほどかかります。その間、ユーザーには Web サイトのヘッダーとフッターが表示されますが、それ以外は空白です。何かが起こっている兆候も、アプリケーションがロードされている兆候もありません。

iFram を介してではなく直接表示すると、アプリケーションには読み込み中の gif がありますが、ページの右上隅に配置されているため、iFrame から完全に見えません。読み込み中の gif は、id="InitialLoader" の div に表示されます。

アプリケーションのコードを制御することはできません (読み込み中の gif を移動するなど)。ただし、Web サイトでコードを編集することはできます。そのローディング シンボルを何らかの方法で利用して、アプリケーションで表示されている限り、独自のローディング シンボル (または実際には同じシンボル) を表示することが可能かどうか疑問に思いました。

私が持っていたアイデアの 1 つは、jQuery .load を使用することですが、これが実現可能かどうかはわかりません。読み込み中のシンボルは永続的に表示されるのではなく、ページが読み込まれたときにのみ表示されます。特定のユーザーがロードしているときに、Web ページに表示したいと考えています。これが私が考えていたコードの例です：

jQuery

    <script>
jQuery(document).ready(function(){
    jQuery("#loading").load('http://www.application_blah.co.uk #InitialLoader');
});
</script>

HTML

<div id="loading"></div>

他の方法があれば、私は提案に非常にオープンです！上記が実現可能かどうかを知ることも良いでしょうか? 代理店から請求されるので、ウェブサイトでテストするのは難しいので、コミットする前に確認したい.

どうもありがとう、

ケイティ

4

3 に答える 3

0

実際に、フレーム自体でDIVを移動してみることができます。DIV「InitialLoader」はQlikviewのCSSによって制御されます。CSSを編集して、DIVをページの中央に配置することができます。次に、「Loading...」テキストを「opendoc.htm」内の別のテキストに編集できます。

于 2013-03-14T09:21:44.983 に答える
0

わかりました、あなたが抱えている問題は、あなたが次のことをしていることだと思います：

1）準備が整ったimgタグが設定されたiframeをロードしています...

2）imgがロードされたかどうかをjqueryで尋ねるか、onload属性を適用すると、タグがすでにレンダリングされており、DOMがこのロジックをサポートしていないように見えるため、失敗するだけです。

私が見つけたオプションは、ドキュメントが img 用にロードされたら手動でソースを設定することです (可能な場合)。jFiddle は簡単な例を示します。

$(document).ready(function(){
    $('img').attr('src', 'http://onerahi.cabu.school.nz/files/2012/09/goes-12-firstimage-large081701.jpg').load(function() { alert('loaded'); });
}
);

http://jsfiddle.net/7E6zQ/

#

わかりましたので、既存のイメージを取得して作り直して、新しい onload 関数を使用して dom に追加します。これにより、新しいフィドルが添付された結果が得られると思います。

http://jsfiddle.net/yNGV7/

$('document').ready(function(){
    var newimg = new Image();
    newimg.src = $('img').attr('src');
    newimg.onload = function() {
         //remove loading msg
        $('.ctx-menu-text').remove();

            //hide the div
        $('#InitialLoader').fadeOut(1000);
    }

    $('img').replaceWith(newimg);
});
于 2013-03-07T12:13:53.153 に答える
0

ジョンに例をありがとう - jsfiddle で見ることができるのは素晴らしいことです!

私が理解していることから、画像の読み込みが完了したときにアラートを表示するコードを作成しました。おそらく、これは少し微調整することで私の目的に使用できますか？よくわかりません。これが私が達成する必要があるものです：

アプリケーションのロード中

アプリケーションの読み込み中、www.application-blah.co.uk の読み込み中の gif コンテナー div は次のようになります。 

<div id="InitialLoader">
<img src="working.gif">
<span class=ctx-menu-text">Loading...</span>
</div>

このdivがwww.application-blah.co.ukに表示されている間、www.mysite.comに読み込みメッセージを表示したいと思います。

アプリケーションのロードが完了したら

アプリケーションが読み込まれると、次のように、読み込み中の gif を含む div のスタイルが style="display:none" に変更されます。

<div id="InitialLoader" style="display:none">
<img src="working.gif">
<span class=ctx-menu-text">Loading...</span>
</div>

これが発生した場合、www.mysite.com の読み込みメッセージが消えてほしいです。

それが理にかなっていることを願っています！理想的なシナリオではないことはわかっています。

再度、感謝します！

ケイティ

于 2013-03-07T16:46:50.313 に答える