Đang tải iframe bên trong hộp thoại Giao diện người dùng không hoạt động

Tôi muốn tải và hiển thị khung nội tuyến bên trong hộp thoại Giao diện người dùng sẽ mở bằng cách nhấp vào các yếu tố được tạo động thông qua chức năng jQuery.Đang tải iframe bên trong hộp thoại Giao diện người dùng không hoạt động

Đây là mã của tôi

HTML

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

jQuery

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

đâu event.map được biến chứa chuỗi HTML như đưa ra dưới đây và sẽ thay đổi tùy thuộc vào phần tử người dùng đã nhấp .

Trong tất cả mọi thứ ngắn gọn là dữ liệu được tạo động và HTML ngoại trừ trên mã 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>

Nhưng chuỗi này chỉ hiển thị bên trong hộp thoại và tôi muốn khung nội tuyến được tải bên trong.

Nguồn

2016-09-17 Bhavesh Nariya

Cần thêm thông tin để cung cấp giải pháp hoàn chỉnh. Nếu tôi hiểu điều này, bạn có một bản đồ hình ảnh và khi được nhấp vào, điều này sẽ hiển thị hộp thoại chứa 'iframe' trong đó nguồn được đặt từ dữ liệu có liên quan đến sự kiện nhấp chuột. Đúng không? – Twisty

Nếu không có thêm chi tiết về dự án này, đây là những gì tôi sẽ đề xuất. Giả sử:

Mỗi sự kiện có một bản đồ để nó
Có tồn tại một nút hoặc liên kết đó sẽ khởi động hộp thoại
vào nút hoặc liên kết sẽ có một URL mà là để được sử dụng cho các iframe

làm việc Ví dụ: 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) 
    }); 
});

Để giữ cho các giải pháp năng động, tôi đề nghị một chức năng thu thập các nguồn được sử dụng cho các iframe. Nếu có một số iframe cũ hơn, từ một hành động trước đó, nó sẽ bị xóa. Sau đó, tôi tạo một mã số iframe động, với nguồn mới và thêm vào #map. Một khi điều này được thực hiện, tôi gọi mở trên hộp thoại.

Bạn có thể sử dụng showMap() với nhiều sự kiện nhấp chuột khác nhau và cung cấp cho nó bất kỳ URL nào bạn muốn hiển thị trong iframe.

Tôi cũng có thể đề xuất lưu trữ URL hoặc thu thập URL từ liên kết. Ví dụ, nếu mỗi sự kiện có liên kết đến các bản đồ như:

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

Bạn có thể thu thập thông tin này và sử dụng nó như vậy:

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

này cũng có thể được lưu trữ trong các nút sử dụng data-map-url như một cũng thuộc tính.

Nguồn

2016-09-21 16:07:22 Twisty

Giải pháp hoàn hảo. Làm tốt lắm .. –

Sử dụng mã bên dưới cho sự cố của bạn.

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

Nguồn

2016-09-19 10:19:33

Đầu tiên đọc chi tiết tiền thưởng bro. –

Nó cũng được thực hiện bằng cách chỉ tạo phần tử tạm thời thông qua jQuery để tìm nạp src từ chuỗi khung nội tuyến HTML, sau đó gán src cho iframe.

HTML code My

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

jQuery đang

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

giải pháp tối ưu mà không tạo khung nội tuyến trong div ẩn hoặc bất cứ điều gì khác. Đó là tất cả

Nguồn

2016-09-20 12:44:21

Đang tải iframe bên trong hộp thoại Giao diện người dùng không hoạt động

Trả lời

Các vấn đề liên quan