6

jQuery の素敵でシンプルなdialogコマンドを使用して、埋め込まれたサード パーティのコンテンツの前にダイアログ ボックスを開きます。この埋め込みコンテンツは、任意の Web サイトのページである可能性があります。これを一部のサイト (Yahoo、Google) で動作させることはできますが、他のサイト (MSN、Johnlewis、FT) では動作させることができません。

問題の骨子を示すために、以下のコードから可能な限り削除しました。表示されているコードは正常に動作し、ダイアログ ボックスは表示されます。しかし、YAHOO 行をコメントアウトし、MSN 行のコメントを外すと、ダイアログは表示されません!!

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <style>
        .ui-widget-header { border: 1px solid #aaaaaa; background: #1f84f5 url(images/ui-bg_highlight-hard_75_1f84f5_1x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; font-size: 20pt; }
        .ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222;  font-size: 20pt;}
    </style>
        <script>
            $(document).ready(function() {
                $( "#thedialog" ).dialog( "destroy" );
                $( "#thedialog" ).dialog({height:400, width:600, modal: true,
                    buttons: {Cancel: function() {$( this ).dialog( "close" );}}
                });
            });
    </script>
</head>
<body>
    <?php 
        // WORKING - these pages DO launch a dialog:
        $targetlink = 'http://www.yahoo.com';
        // $targetlink = 'http://www.bbc.co.uk';
        // $targetlink = 'http://www.google.com';

        // NOT WORKING - these pages do NOT launch a dialog:
        // $targetlink = 'http://www.msn.com';
        // $targetlink = 'http://www.johnlewis.com';
        // $targetlink = 'http://www.ft.com';

        echo file_get_contents($targetlink);
    ?>
    <div id="thedialog" title="Simple dialog box" style="display:none">My girl lollipop</div>
</body>

私が考えることができる唯一のことは、私のコードと競合している動作していない Web サイトの何かに違いないということです - 問題をエラートラップするためにあらゆることを試みましたが、原因を見つけることができません

誰でも私を助けてもらえますか？

注: - (1) 示されている例では PHP が必要ないことはわかっていますが、より完全なバージョンでは必要です (この例を小さくするために、ほとんどの PHP コードを取り除いただけです)。- (2) フル バージョンのページの別の場所で JQuery を使用しているため、別のフレームワークや方法を導入するのではなく、理想的には JQuery を使い続けたいと考えています。

4

4 に答える 4

5

私の側では問題を再現できませんでしたが、Terry Seidler の回答は有効です。ダイアログと JQuery が既にあるサイトとの競合が発生します。

この問題に対処するには 2 つの方法があります (UI プラグインも使用しているため、「競合しない」方法ではうまくいかないと思います)。

  1. $が定義され、定義されているかどうかを確認し$.dialogます。定義されている場合はサイトにあるものを使用し、そうでない場合は動的読み込みを使用します

  2. 生の JS を使用しonloadてページ/ウィンドウのハンドラーを追加し、関数を実行します。この関数には、JQuery と JQuery-UI のコードを貼り付ける必要があります。このメソッドは、名前空間の問題を回避するために関数のスコープを使用します。

方法 2 をより明確にするために、次の JS コードをイメージしてください。

function printMe() { alert("this will print me"); }

function printMeToo(){

     function printMe(){ alert("this will print me too"); }
     printMe(); 

}

printMeToo();

このコードは、「this will print me too」と警告する必要があります。またprintMe、ページの他の場所で実行すると、「this will print me」と警告されます。こうすることで、読み込んでいるページに害を与えることはなく (これも考慮する必要があります)、それらがあなたに影響を与えることはありません。

どのように見えるでしょうか？生の JS オンロード ハンドラーを追加する方法を確認するには、この stackoverflow questionを参照してください。それは次のようなものだとしましょうdocument.addEventListener( 'onload', function () { ... /* important stuff */ });

重要なことは、この関数がどのように見えるかです。これは予想される構造です

function(){ /* important stuff function */ 

       // paste here JQuery definition code (copy paste into here... ) make sure to use the minified code!
       (function(a,b){function G(a) ... {return p})})(window);

      // paste other plugins code as well. dialog + ... 

      .... 


      // now your code should be here, exactly like you posted it untouched

      $("myelement"); // this uses MY JQuery version, and my JQuery-UI version and my plugins without the possibility of an override. The site cannot override my code, and I cannot override the site's code. 

} /* end of really important stuff function here */

このメソッドが実際に実行されているのを見たいですか? 私は自分のサイトをIncapsulaで保護しています- そして彼らは私のサイトに彼らのシールを表示します (あなたのダイアログのようなものです) - 右下のフローティング div を見てください? 私がここで指定したように、彼らはそこでもJQueryやその他のものを使用しています。

ところで-CSSに関して-同じ問題が発生する可能性があります。たとえば、クラス .bottom を参照します。他のサイトには、その正確なクラスと独自の CSS がある場合があります。ダイアログコード全体を非常に一意の ID でラップしてください (gjkelrgjkewrl849603856903ID衝突を避けるために、すべての CSS セレクターをそれで開始します)。

于 2012-08-24T13:07:05.893 に答える
3

[編集] どうやらそれは一部の人々のために働いているようです..

Firebug コンソールは、このようなもののデバッグに役立ちます。この場合、$('#thedialog') is not a functionエラー メッセージが表示されます。

jQuery noConflictを使用して動作させました：

<script>
    var $j = jQuery.noConflict();
        $j(document).ready(function() {
            $j( "#thedialog" ).dialog( "destroy" );
            $j( "#thedialog" ).dialog({height:400, width:600, modal: true,
                buttons: {Cancel: function() {$( this ).dialog( "close" );}}
            });
    });
    </script>

私の推測では、これらのページの何かが $ を競合/オーバーライドしていると思われますが、これはうまく機能しているようです (msn.com でテスト済み)。

詳細については、このページをご覧ください。

于 2012-08-24T12:55:21.063 に答える
0

style="display:none"ダイアログを自動的に開きたい場合は、コードを削除する必要があります。

このコードを試してください：

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <style>
        .ui-widget-header { border: 1px solid #aaaaaa; background: #1f84f5 url(images/ui-bg_highlight-hard_75_1f84f5_1x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; font-size: 20pt; }
        .ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222;  font-size: 20pt;}
    </style>
    <script>
        $(document).ready(function() {
            $( "#thedialog" ).dialog( "destroy" );
            $( "#thedialog" ).dialog({height:400, width:600, modal: true,
                buttons: {Cancel: function() {$( this ).dialog( "close" );}}
            });
    });
    </script>
</head>
<body>
    <?php 
        $targetlink = 'http://www.yahoo.com';   
        echo file_get_contents($targetlink);
    ?>
    <div id="thedialog" title="Simple dialog box">My girl lollipop</div>
</body>
于 2012-08-24T12:58:05.070 に答える
-1

私はあなたのコードを試しましたが、うまくいきました。生成されたソースに php エラー メッセージがあり、JS コードと競合している可能性があります。

生成されたソースをブラウザで確認します。

于 2012-08-24T12:48:15.310 に答える