從另一個網站的內容jQuery對話框

我使用jQuery的可愛和簡單的dialog命令打開一些嵌入式第三方內容前的對話框。這個嵌入式內容可以是來自任何網站的頁面。我CAN得到這個工作在一些網站（雅虎，谷歌），但我不能得到它在其他網站（MSN，約翰劉易斯，金融時報）工作。從另一個網站的內容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>

我能想到的唯一的事情是它必須是一個與我的代碼衝突的非工作網站之一的東西 - 我用盡了一切錯誤陷阱的問題，但不能找到什麼導致它。

任何人都可以幫助我嗎？

注： - （1）我知道，如圖不需要PHP的例子，但更全面的版本沒有（我只是剝奪大多數PHP代碼的客場保持這個例子小）。（2）我在更完整的版本的頁面中的其他地方使用JQuery，所以我希望繼續使用JQuery，而不是引入其他框架/方法。

來源

2012-08-24 Steve

我檢查了代碼，它似乎工作。 - 我需要更多的細節才能幫助 –

我建議你在f12中使用chrome，看看你是否在JS控制檯中出現錯誤。有關更多詳細信息，我已經在chrome上設置了一個開發人員工具的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

@Steve - 應該能夠以15分以上的投票，但也看看蓋伊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，所以顯示：無隱藏對話框內容，直到onclick發生。感謝評論） – Steve

即使我無法重現我的問題到底出，特里辛德勒的答案是有效的。您將遇到與已有對話框和JQuery的網站發生衝突。

你有2種方法來攻擊這個問題（我不認爲「無衝突」的方法會同時還使用UI插件做）

檢查，如果$定義和$.dialog定義。如果已定義，請使用網站的內容，否則使用dynamic loading
使用原始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();

此代碼應警惕「這將打印跟風」 - 和頁面上運行printMe其他地方會提醒「這將打印我「。這樣你就不會傷害你正在加載的頁面（這也是你應該考慮的），它們不會對你產生任何影響。

它會是什麼樣子？爲了看到如何添加原始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保護我的網站 - 因此他們在我的網站上顯示他們的印章（有點像您的對話） - 請參閱右下角的浮動div？他們也使用JQuery和其他的東西，就像我在這裏指定的一樣。

順便說一句 - 關於CSS - 你可能會遇到同樣的問題。例如，您可以參考.bottom類 - 其他網站可能具有自己的確切類和CSS。確保你用一個非常獨特的ID來包裝整個對話框代碼（類似gjkelrgjkewrl849603856903ID - 並且用它來啓動所有的CSS選擇器以避免衝突）。

來源

2012-08-24 13:07:05

好的！感謝您的解釋！ –

男士，謝謝你的回答 - 特里的答案解決了問題，所有工作都在進行中。然而，你是否從你的回答中提出，我仍然可能會遇到未被發現的未來問題/衝突，所以儘管Terry的工作，應該嘗試你的方法嗎？我嘗試了我認爲你的意思，但它沒有奏效（毫無疑問，由於我的編碼而不是你的建議！）： 'myfunc（）{ $（document）.ready（function（）{ $（「#thedialog」）.dialog（{高度：400，等等等等 }）; \t }; <體的onLoad = 「MYFUNC（）;」> 等，等...' – Steve

編輯我的答案。 –

從另一個網站的內容jQuery對話框

回答

相關問題