1. घर
  2. सवाल और जवाब
  3. किसी अन्य साइट से सामग्री पर jQuery संवाद

किसी अन्य साइट से सामग्री पर jQuery संवाद

2012-08-24 16 views
6

मैं कुछ एम्बेडेड तृतीय पक्ष सामग्री के सामने एक संवाद बॉक्स खोलने के लिए jQuery के सुंदर और सरल dialog कमांड का उपयोग कर रहा हूं। यह एम्बेडेड सामग्री किसी भी वेबसाइट से एक पृष्ठ हो सकती है। I CAN कुछ साइटों (याहू, Google) पर काम करने के लिए इसे प्राप्त करें, लेकिन मैं अन्य साइटों (एमएसएन, जॉनेलीविस, एफटी) पर काम करने के लिए नहीं मिल सकता।किसी अन्य साइट से सामग्री पर jQuery संवाद

मैंने समस्या के नंगे हड्डियों को देने के लिए नीचे दिए गए कोड से जितना संभव हो उतना बाहर निकाला है - जैसा कि यह दिखाया गया है कि कोड ठीक काम करता है और संवाद बॉक्स प्रदर्शित होता है। लेकिन, याहू लाइन पर टिप्पणी करें और एमएसएन लाइन को अपूर्ण करें, तो संवाद प्रदर्शित नहीं होगा !! मैं त्रुटि-जाल करने के लिए इस मुद्दे को सब कुछ कोशिश की है लेकिन क्या पैदा नहीं मिल सकता है -

<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 कोड का सबसे छीन इस उदाहरण छोटे रखने के लिए) है। - (2) मैं पूर्ण संस्करण पर पृष्ठ में JQuery का उपयोग कर रहा हूं, इसलिए आदर्श रूप से मैं वैकल्पिक ढांचे/विधि को शुरू करने के बजाय JQuery के साथ रहना चाहता हूं।

स्रोत

2012-08-24 Steve

+0

मैंने कोड की जांच की और ऐसा लगता है कि यह काम करता है। - –

+0

की सहायता के लिए मुझे अधिक जानकारी चाहिए, मुझे सुझाव है कि आप जेएस कंसोल में त्रुटियों को प्राप्त करने के लिए एफ 12 के साथ क्रोम का उपयोग करें। अधिक जानकारी के लिए, मैंने क्रोम में डेवलपर्स टूल्स पर विकी पेज स्थापित किया है: http://wiki.mograbi.info/developers-tools-for-web-development - यह पोस्ट यह भी बताता है कि जेएस को अलग-अलग में कैसे फंसाना है तरीका। –

+0

कुछ भी अपना संवाद बॉक्स खोलें नहीं। "शैली =" डिस्प्ले को हटाएं: कोई भी नहीं; "अपने div का हिस्सा और पैरामीटर" autoOpen: true "को अपने संवाद निर्माण में जोड़ें – sdespont

उत्तर

3

[संपादित करें] जाहिर है यह कुछ लोगों के लिए काम कर रहा है .. मैं अपने आप को यह हालांकि नीचे बदलाव के बिना काम करने के लिए नहीं मिल सकता है .. [/ संपादित करें]

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

+0

यह सबसे अच्छा जवाब है - अगर मैं कर सकता हूं तो मैं 'अप-वोट' करूँगा, दूसरों को यह दिखाने के लिए कि यह हल हो गया है, लेकिन मैं यहां नया हूं इसलिए अगर कोई और इस जवाब को वोट दे सकता है मैं (दूसरों को यह जानने में मदद करता हूं कि यह समस्या हल करने वाला है) यह बहुत अच्छा होगा। धन्यवाद टेरी - यह एक बहुत बड़ी मदद है - मेरे पास एक झुकाव का प्रकार हो सकता था कि संघर्ष हो रहा था - मैं भी 'नोकॉनफ्लिक्ट' कमांड में ठोकर खाई, लेकिन इसे काम नहीं कर सका - आप वास्तव में उपयोगी रहे हैं – Steve

+0

@Steve - अब 15 अंक के साथ मतदान करने में सक्षम होना चाहिए, लेकिन गाय मोग्राबी की पोस्ट पर भी एक नज़र डालें, ऐसा लगता है कि उसके साथ थोड़ा और अनुभव है;) –

-1

मैंने आपके कोड की कोशिश की है, और यह मेरे लिए काम करता है। हो सकता है कि आपके पास जेनरेट किए गए स्रोत में एक PHP त्रुटि संदेश हो और यह आपके साथ जेएस कोड के साथ संघर्ष करे।

ब्राउज़र में जेनरेट किए गए स्रोत की जांच करें।

स्रोत

2012-08-24 12:48:15 pirklajos

+0

यह वास्तव में एक टिप्पणी है, एक जवाब नहीं। थोड़ा और प्रतिनिधि के साथ, [आप टिप्पणियां पोस्ट करने में सक्षम होंगे] (http://stackoverflow.com/privileges/comment)। इस पल के लिए मैं इस पोस्ट को हटाने के लिए फ़्लैग कर रहा हूं। – Lix

+0

(यहां कोई भी काम नहीं कर रहा है) –

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-24 12:58:05 sdespont

+0

सहमत हैं, आप सही हैं (यह कोड का बायां-थोड़ा सा था पूर्ण संस्करण से - संवाद को टकराव करने के लिए उपयोग किया जाता था, इसलिए डिस्प्ले: किसी भी ने ऑनक्लिक ओकुर्रेड तक संवाद सामग्री छिपाई नहीं। टिप्पणी के लिए धन्यवाद) – Steve

5

भले ही मैं अपने अंत पर समस्या पुन: पेश करने में असमर्थ था, टेरी सीडलर के जवाब मान्य है:

इस कोड का प्रयास करें। आप उन साइटों के साथ टकराव का अनुभव करेंगे जिनके पास पहले से ही संवाद और JQuery है।

आप 2 तरीकों से इस समस्या को हमला करने के लिए है, तो $ परिभाषित किया गया है और $.dialog परिभाषित किया गया है (मुझे नहीं लगता कि के रूप में आप भी यूआई प्लग इन का उपयोग कर रहे हैं 'कोई विवाद' विधि क्या करेंगे है)

  1. जांच । यदि यह परिभाषित किया गया है, का उपयोग क्या साइट है, अन्यथा dynamic loading

  2. उपयोग कच्चे जे एस का उपयोग पेज/खिड़की के लिए onload को हैंडलर जोड़ने, और एक समारोह को चलाने के लिए। इस फ़ंक्शन में आपको JQuery और JQuery-UI के कोड पेस्ट करना चाहिए। नेमस्पेस समस्याओं से बचने के लिए यह विधि फ़ंक्शन के दायरे का उपयोग करती है।

बस विधि 2 और अधिक स्पष्ट, छवि बनाने के लिए जे एस कोड निम्नलिखित

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

function printMeToo(){ 

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

} 

printMeToo();

इस कोड को सचेत करना चाहिए "इस मुझे भी प्रिंट होगा" - और पृष्ठ पर किसी और printMe चल "इस चेतावनी देगा मुझे प्रिंट करेगा "। इस तरह आप उन पृष्ठों को नुकसान नहीं पहुंचाएंगे जिन्हें आप लोड कर रहे हैं (जो कुछ भी आपको विचार करना चाहिए) और उनका आपके ऊपर कोई प्रभाव नहीं पड़ेगा।

यह कैसा दिखता है? कच्चे जेएस ऑनलोड हैंडलर को जोड़ने का तरीका देखने के लिए, आप 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 और अन्य सामानों का भी उपयोग करते हैं जैसे कि मैं यहां निर्दिष्ट करता हूं।

बीटीडब्ल्यू - सीएसएस के संबंध में - आपको वहां भी वही समस्याएं मिल सकती हैं। उदाहरण के लिए आप कक्षा .bottom का संदर्भ लें - अन्य साइटों में उस सटीक वर्ग और सीएसएस का स्वयं का हो सकता है। सुनिश्चित करें कि आप पूरे संवाद कोड को एक बहुत ही अद्वितीय आईडी (gjkelrgjkewrl849603856903ID जैसे कुछ के साथ लपेटें - और टक्कर से बचने के लिए अपने सभी सीएसएस चयनकर्ताओं को शुरू करें)।

स्रोत

2012-08-24 13:07:05

+0

अच्छा है! स्पष्टीकरण के लिए धन्यवाद! –

+0

लड़का, उत्तर के लिए धन्यवाद - टेरी के जवाब ने समस्या हल की और सब काम कर रहे हैं। हालांकि, क्या आप अपने उत्तर से सुझाव दे रहे हैं कि मुझे अभी भी भविष्य की समस्याओं/संघर्षों का सामना करना पड़ सकता है जिन्हें मैंने अभी तक नहीं खोजा है, इसलिए टेरी के काम के बावजूद भी आपके दृष्टिकोण की कोशिश करनी चाहिए? मैंने कोशिश की है कि मैं क्या सोचता हूं 'लेकिन आपने काम नहीं किया है (इसमें कोई संदेह नहीं है कि आपके सुझाव के बजाए मेरे कोडिंग के कारण!): 'myfunc() { $ (दस्तावेज़) .ready (function() { $ ("#thedialog") .dialog ({ऊंचाई: 400, आदि, आदि }); \t }; <शरीर ऑनलोड = "myfunc();"> आदि, आदि ... ' – Steve

+0

संपादित मेरा जवाब। –

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^