別のサイトからのコンテンツのjQueryダイアログ

jQueryの素敵でシンプルなdialogコマンドを使用して、埋め込まれたサードパーティのコンテンツの前にダイアログボックスを開きます。この埋め込みコンテンツは、どのWebサイトからのページでもあります。私はCANいくつかのサイト（ヤフー、グーグル）で動作するようにしましたが、私はできません。は、他のサイト（MSN、Johnlewis、FT）でも動作します。別のサイトからのコンテンツのjQueryダイアログ

問題の裸の骨を得るために、以下のコードからできるだけ外しました。コードが正常に動作し、ダイアログボックスが表示されます。しかし、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サイトのいずれかに何かをでなければなりませんそれ。

誰でも教えてください。

NOTES： - （1）（私はちょうど小さなこの例を維持するために離れてPHPコードのほとんどを取り除い）に示すように私は例を知っているPHPを必要としませんが、より完全なバージョンはありません。 - （2）完全なバージョンのページのJQueryを使用していますので、別のフレームワーク/メソッドを導入するのではなく、JQueryを使いたいと思っています。

出典

2012-08-24 Steve

コードを確認したところ、うまくいくようです。 - 私はより多くの詳細が必要です –

私はあなたがJSコンソールでエラーが発生するかどうかを確認するためにf12とクロムを使用することをお勧めします。詳細については、クロムの開発者ツールに関するwikiページを設定しました：http://wiki.mograbi.info/developers-tools-for-web-development - この記事では、JSを別の方法でエラートラップする方法についても説明しています方法。 –

ダイアログボックスを開いても何も表示されません。あなたのdivの "style =" display：none; "部分を削除し、ダイアログの作成にパラメータ" autoOpen：true "を追加してください。 – sdespont

[編集]どうやらは、一部の人のために働いてです..私は自分自身がそれはしかし、以下の変更を加えることなく動作させることはできません.. [/編集]

Firebugのコンソールは、このようなものをデバッグするのに便利です。この場合、$（ '＃thedialog'）は関数エラーメッセージではありません。

私はそれが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をテストしました）私の推測では、それらのページ上の何かが$をオーバーライド/矛盾していることであるが、これは正常に動作するようです。

詳細はthis pageをご覧ください。

出典

2012-08-24 12:55:21

これは最高の答えです - できるならば私は投票します。他の人にこれを解決してもらえるようにします。私は（他の人が問題を解決したことを他の人に知らせるために）それはすばらしいでしょう。おかげでテリー - それは大きな助けです - 私は矛盾が発生している可能性があります - 私は 'noConflict'コマンドを偶然見つけましたが、それを動作させることができませんでした - あなたは本当に有益でした – Steve

@今15ポイント以上で投票することができるはずですが、Guy mograbiの投稿を見てください。彼はもう少し経験があるようです;） –

-1

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

ブラウザで生成されたソースを確認してください。

出典

2012-08-24 12:48:15 pirklajos

これは本当に、答えはありません。もう少し担当者がいれば、コメントを投稿することができます（http://stackoverflow.com/privileges/comment）。 – Lix

（ここでもうまくいきません） –

ダイアログが自動的に開かれるようにするには、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-24 12:58:05 sdespont

合意しました。これは残念です完全なバージョンから - ダイアログは、onclickをトリガされていたので、表示：noneは、onclick ocurredまでダイアログの内容を隠しました。ありがとうコメント – Steve

私は私の側で問題を再現することができませんでしたにもかかわらず、テリーSeidlerの答えが有効です。すでにダイアログとJQueryを持つサイトとの衝突が発生します。

$が定義されていると$.dialogが定義されている場合は、この問題を攻撃するために2つの方法（私はあなたにもUIのプラグインを使用しているように「no紛争」メソッドがそうなるとは思わない）

チェックを持っています。それが定義されている場合、サイトが持っているものを使用し、それ以外の場合はdynamic loading
を使用するページ/ウィンドウのonloadにハンドラを追加し、機能を実行するために、生のJSを使用します。この関数では、JQueryとJQuery-UIのコードを貼り付ける必要があります。このメソッドは、関数のスコープを使用して名前空間の問題を回避します。

ただ、方法2をより明確にする、画像次JSコード

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

function printMeToo(){ 

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

} 

printMeToo();

このコードは、「これはあまりにも私を印刷します」警告すべきである - とページ上のどこか他のprintMeを実行すると、「このことを警告します私を印刷します "。この方法では、読み込んでいるページ（それも考慮すべきものです）に害を与えることはなく、あなたに影響を与えません。

どのように見えるのですか？ raw JS onloadハンドラを追加する方法を確認するには、this 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で自分のサイトを保護しているので、自分のサイトにシールを表示します（ダイアログのようなものです）。右下のフローティングディビジョンを参照してください。ここで指定したように、JQueryなども使用しています。

BTW - CSSに関して - 同じ問題が発生する可能性があります。たとえば、クラス.bottomを参照してください - 他のサイトは、そのクラスと独自のCSSを持っている可能性があります。非常に一意のID（gjkelrgjkewrl849603856903IDのようなもの）でダイアログコード全体を囲み、衝突を避けるためにすべてのCSSセレクタを起動するようにしてください。

出典

2012-08-24 13:07:05

いいです！説明ありがとう！ –

ガイ、答えに感謝 - テリーの答えが問題を解決し、すべてが動作しています。しかし、私はまだ発見していない未来の問題や葛藤に遭遇する可能性があることをあなたの答えから示唆しているので、テリー氏が働いていてもあなたのアプローチを試してみるべきですか？私はあなたが意味すると思ったことを試しましたが、それはうまくいきませんでした（あなたの提案ではなく、コーディングのために間違いなく疑問に思っています！）： 'myfunc { $（document）.ready {function { $（ "#thedialog"）.dialog（{高さ：400、等、等 }）; \t }; <本体のonLoad = "myfunc関数（）;">等... ' – Steve

編集等私の答え。 –

別のサイトからのコンテンツのjQueryダイアログ

答えて

関連する問題