Ładowanie elementu iframe wewnątrz okna dialogowego interfejsu użytkownika nie działa

Chcę załadować i wyświetlić element iframe wewnątrz okna dialogowego interfejsu użytkownika, które zostanie otwarte, klikając elementy, które są generowane dynamicznie za pomocą funkcji jQuery.Ładowanie elementu iframe wewnątrz okna dialogowego interfejsu użytkownika nie działa

Oto mój kod

HTML

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

jQuery

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

Gdzie event.map jest zmienna zawiera ciąg HTML jak podano poniżej i będą zmieniać się w zależności od elementu użytkownik kliknięciu .

W skrócie wszystko jest dynamicznie generowane dane i HTML, z wyjątkiem kodu HTML powyżej.

<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>

Ale to po prostu wyświetla łańcuch wewnątrz okna dialogowego i chcę załadowany wewnątrz niego element iframe.

Źródło

2016-09-17 Bhavesh Nariya

Potrzebujesz więcej informacji, aby zapewnić kompletne rozwiązanie. Jeśli to rozumiem, masz mapę obrazu, a po kliknięciu powinno to pokazać okno dialogowe zawierające "iframe", gdzie źródło jest ustawione z danych związanych ze zdarzeniem kliknięcia. Czy to jest poprawne? – Twisty

Bez dalszych szczegółów na temat tego projektu, to właśnie proponuję. Zakładając:

Każde zdarzenie ma mapę do niego
Istnieje przycisk lub łącze, które będzie otworzyć okno
przycisk lub link miałoby URL, który ma być używany do iframe

Przykład pracy: https://jsfiddle.net/Twisty/9dk8jrqc/

HTML

<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) 
    }); 
});

Aby utrzymać dynamiczny rozwiązanie, proponuję funkcję, która pobiera źródło zostać wykorzystane do iframe. Jeśli istnieje starsza wersja iframe, z poprzedniej czynności, jest ona usuwana. Następnie utworzę dynamicznie, z nowym źródłem, iframe i dołączam go do #map. Gdy to zrobisz, zadzwonię do Open w oknie dialogowym.

Możesz używać showMap() z wieloma różnymi zdarzeniami kliknięcia i podawać je pod dowolnym URL-em, który chcesz pokazać w iframe.

Mogę również zasugerować przechowywanie adresu URL lub pobranie go z linku. Na przykład, jeśli każde zdarzenie miało link do mapy jak:

<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>

Można zebrać te informacje i używać go tak:

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

Może to być również przechowywane w przyciski za pomocą data-map-url jako atrybut też.

Źródło

2016-09-21 16:07:22 Twisty

Idealne rozwiązanie. Świetna robota Twisty .. –

Użyj poniższego kodu dla swojego problemu.

<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>

Źródło

2016-09-19 10:19:33

Najpierw przeczytaj szczegóły bount z nagrodami. –

Jest również wykonane tylko przez tworzenie tymczasowy element poprzez jQuery dla pobierania z iframe src HTML ciąg, po czym przypisać do iframe src.

Mój kod HTML

kod

<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});

zoptymalizowane rozwiązanie bez generowania iframe w ukrytym div lub cokolwiek innego. To wszystko

Źródło

2016-09-20 12:44:21

Ładowanie elementu iframe wewnątrz okna dialogowego interfejsu użytkownika nie działa

Odpowiedz

Powiązane problemy