在UI對話框中加載iframe不起作用

我想加載並顯示UI對話框中的iframe，通過點擊那些通過jQuery函數動態生成的元素來打開它。在UI對話框中加載iframe不起作用

這裏是我的代碼

HTML

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

但是，這只是顯示對話框中的字符串，我想加載iframe裏面。

來源

2016-09-17 Bhavesh Nariya

需要更多信息來提供完整的解決方案。如果我理解了這一點，你就有了一個圖像映射，點擊後，它應該顯示一個包含'iframe'的對話框，其中的源代碼由click事件中涉及的數據設置。那是對的嗎？ – Twisty

沒有關於這個項目的更多細節，這是我的建議。假設：

每個事件都有它的映射
存在一個按鈕或鏈接，將啓動對話
按鈕或鏈接本來是要用於iframe

工作實施例：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) 
    }); 
});

爲了保持動態的解決方案，我建議收集到用於iframe源的功能。如果以前的操作存在較舊的iframe，則將其清除。然後，我使用新來源動態創建iframe，並將其附加到#map。一旦完成，我打開對話框打開。

您可以使用showMap()進行多種不同的點擊事件，併爲您提供iframe中顯示的任何網址。

我也可能建議存儲URL或從鏈接中收集URL。例如，如果每個事件有一個鏈接到地圖，如：

<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

完美的解決方案。偉大的工作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

首先閱讀賞金詳情bro。 –

它也可以通過jQuery創建臨時元素來獲取iframe中的src HTML字符串，然後將該src分配給iframe。

我的HTML代碼

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

沒有隱藏的股利或其他任何東西產生的iframe優化的解決方案。這就是全部

來源

2016-09-20 12:44:21

在UI對話框中加載iframe不起作用

回答

相關問題