UI संवाद के अंदर iframe लोड हो रहा है

मैं UI संवाद बॉक्स के अंदर iframe लोड और प्रदर्शित करना चाहता हूं जो jQuery फ़ंक्शन के माध्यम से गतिशील रूप से जेनरेट किए गए तत्वों पर क्लिक करके खुल जाएगा।UI संवाद के अंदर iframe लोड हो रहा है

यहाँ मेरी कोड

<div id="eventContent" title="Event" style="display:none;"> 
<div id="map"></div> 
</div>

jQuery

है

एचटीएमएल

$('#map').html(event.map); 
$('#eventContent').dialog({modal: true});

कहाँ event.map चर नीचे दिए गए जैसे HTML स्ट्रिंग जाता है और जो तत्व उपयोगकर्ता क्लिक किया है के आधार पर बदल जाएगा ।

संक्षेप में सब कुछ ऊपर HTML कोड को छोड़कर गतिशील रूप से जेनरेट किया गया डेटा और HTML है।

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9927.782117587185!2d-0.1578822!3d51.5325589!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc2ee490704162539!2sThe+Hub!5e0!3m2!1sen!2suk!4v1452460618657" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

लेकिन यह बस संवाद के अंदर स्ट्रिंग प्रदर्शित करता है, और मैं इसके अंदर आईफ़्रेम लोड करना चाहता हूं।

स्रोत

2016-09-17 Bhavesh Nariya

पूर्ण समाधान प्रदान करने के लिए अधिक जानकारी की आवश्यकता है। अगर मैं इसे समझता हूं, तो आपके पास एक छवि मानचित्र है, और जब क्लिक किया जाता है, तो उसे 'iframe' युक्त संवाद दिखाना चाहिए जहां स्रोत क्लिक ईवेंट में शामिल डेटा से सेट किया गया है। क्या वो सही है? – Twisty

इस परियोजना के बारे में अधिक जानकारी के बिना, मैं यही सुझाव दूंगा। मान लिया जाये कि:

प्रत्येक घटना यह करने के लिए एक नक्शा है
कोई बटन या लिंक है कि संवाद
बटन या लिंक शुरू करेगा एक यूआरएल है कि iframe

कार्य उदाहरण: https://jsfiddle.net/Twisty/9dk8jrqc/

एचटीएमएल

<div id="eventContent" title="Event"> 
    <div id="map"></div> 
</div> 
<button id="show"> 
    Show Event 
</button>

jQuery

var event = { 
    "map": "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9927.782117587185!2d-0.1578822!3d51.5325589!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc2ee490704162539!2sThe+Hub!5e0!3m2!1sen!2suk!4v1452460618657" 
}; 
$(function() { 
    function showMap(url) { 
    $('#eventContent div#map').html(""); 
    var frame = $("<iframe>", { 
     width: 600, 
     height: 450, 
     frameborder: 0, 
     allowfullscreen: true 
    }).css("border", 0); 
    frame.attr("src", url); 
    frame.appendTo($("#eventContent div#map")); 
    $('#eventContent').dialog("open"); 
    } 
    $('#eventContent').dialog({ 
    autoOpen: false, 
    modal: true, 
    width: 640, 
    height: 480 
    }); 
    $('#show').click(function() { 
    showMap(event.map) 
    }); 
});

समाधान गतिशील रखने के लिए, मैं एक समारोह एकत्रित करता है वह स्रोत iframe लिए इस्तेमाल किया जा करने के लिए सुझाव। यदि पिछले क्रिया से पुराना iframe है, तो इसे साफ़ कर दिया गया है। मैं फिर नए स्रोत के साथ iframe गतिशील रूप से बना देता हूं, और इसे #map में जोड़ता हूं। एक बार ऐसा करने के बाद, मैं संवाद पर खुलता हूं।

आप कई अलग-अलग क्लिक ईवेंट के साथ showMap() का उपयोग कर सकते हैं और iframe में जो भी यूआरएल दिखाना चाहते हैं उसे प्रदान कर सकते हैं।

मैं यूआरएल संग्रहित करने या लिंक से इसे कटाई करने का भी सुझाव दे सकता हूं। आप इस जानकारी इकट्ठा होते हैं और इसलिए है कि यह इस्तेमाल कर सकते हैं

<a class="mapLink" href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9927.782117587185!2d-0.1578822!3d51.5325589!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc2ee490704162539!2sThe+Hub!5e0!3m2!1sen!2suk!4v1452460618657">Show Map</a>

: एक के रूप में data-map-url का उपयोग कर

$(".mapLink").click(function(e){ 
    e.preventDefault(); 
    showMap($(this).attr("href")); 
});

यह भी बटन में संग्रहित किया जा सकता है उदाहरण के लिए, यदि प्रत्येक घटना की तरह मानचित्र के लिए लिंक था विशेषता भी।

स्रोत

2016-09-21 16:07:22 Twisty

बिल्कुल सही समाधान। महान नौकरी ट्विस्टी .. –

अपनी समस्या के लिए कोड के नीचे उपयोग करें।

<head> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 

<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> 

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" /> 
</head> 
<div id="terms" style="display:none;"> 
     <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9927.782117587185!2d-0.1578822!3d51.5325589!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc2ee490704162539!2sThe+Hub!5e0!3m2!1sen!2suk!4v1452460618657" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 
</div> 
<a id="showTerms" href="#">Show Terms &amp; Conditions</a>  
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#showTerms').click(function(){ 
      jQuery('#terms').dialog({modal:true}); 
     }); 
    }); 
</script>

स्रोत

2016-09-19 10:19:33

सबसे पहले बाउंटी विवरण ब्रो पढ़ें। –

यह भी, बस आइफ्रेम एचटीएमएल स्ट्रिंग से src प्राप्त करने में कठिनाई के लिए jQuery के माध्यम से अस्थायी तत्व बनाने के द्वारा किया जाता है के बाद कि iframe src है कि आवंटित।

मेरे एचटीएमएल कोड

<div id="eventContent" title="Event" style="display:none;"> 
<div id="map"><iframe src=""></iframe></div> 
</div>

jQuery कोड

$vars = $('<div>' + event.map + '</div>'); 
$srcs = $vars.children('iframe').attr('src'); 
$('#map iframe').attr('src',$srcs); 
$('#eventContent').dialog({modal: true});

छिपा div या कुछ और में आइफ्रेम पैदा करने के बिना

अनुकूलित समाधान। यह सब

स्रोत

2016-09-20 12:44:21

UI संवाद के अंदर iframe लोड हो रहा है

उत्तर

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