iframeをUIダイアログ内で読み込めません。

jQuery関数を使用して動的に生成される要素をクリックすると、UIダイアログボックス内にiframeを読み込んで表示します。ここで iframeをUIダイアログ内で読み込めません。

は

HTML私のコードのjQuery

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

ある

$('#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を含むダイアログが表示されます。あれは正しいですか？ – 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に追加します。これが終わったら、私はダイアログでopenを呼び出します。

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>

：

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

これはまた、ボタンに記憶することができるようdata-map-urlを使用して例えば、場合に各イベントのようなマップへのリンクを持っていました属性も。

出典

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

最初に賞金の詳細を読んでください。 –

また、ちょうどそれがインラインフレームにそのSRCを割り当てた後、IFRAMEのHTML文字列からSRCをフェッチするためのjQueryによる一時的な要素を作成することによって行われます。

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

隠されたdiv要素または何か他にはiframeを発生させず

最適化されたソリューション。すべてです

出典

2016-09-20 12:44:21

iframeをUIダイアログ内で読み込めません。

答えて

関連する問題