web-dev-qa-db-ja.com

bootstrap= 3.0モーダルを使用して、iframe内の動的なリモートコンテンツを読み込む

他の質問やstackexchangeでここに投稿されたいくつかの提案を試しましたが、満足できるものはありません。

動的コンテンツをモーダルにロードしようとしています。具体的には、iFrame内のYouTubeビデオまたはSoundcloudオーディオ。そのため、サイトにアクセスするすべてのユーザーは、ビデオまたはオーディオのリンクを入力できます。モーダルは、そのユーザーリンクを動的に読み込みます。後続の各ユーザーは、すべてモーダル内で、お互いのリンクを確認できます。 （ユーザーごとに個別のモーダル負荷がかかります）

これを正しく動作させることはできません。これをテストするために、「modal.html」という別のhtmlファイルを作成しました。これには、適切なYouTube/Soundcloudクリップを含むiframeが含まれています。

また、タグ内で "data-remote ="を使用する必要があるのか​​、それともhrefで十分なのかについても混乱しています。または、最初のモーダル内でデータリモートを使用しますか？または両方、またはどちらか？どちらも機能していません。

私のコードは次のとおりです。

<a data-toggle="modal" href="modal.html" data-target="#myModal">Click me</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-     remote="modal.html" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
javascripthtml5twitter-bootstrapiframemodal-dialog
23
Alex S

data-remoteもhrefもyoutubeなどのリモートサイトで動作しない理由

Twitterブートストラップのモーダルは、AJAXを使用してdata-remote/href経由でリモートコンテンツをロードします。AJAXは 同じOriginポリシー なので、youtubeなどの別のOriginでサイトにアクセスすると、次のエラーが発生します。

要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません

したがって、data-remoteとhrefのどちらも必要なことを行いません。

[〜＃〜] json [〜＃〜]：jsonデータを取得している場合、潜在的に [〜＃〜]を使用できますjsonp [〜＃〜] 。ただし、youtubeのようなサイトのjsonではなくhtmlが必要なので、別のアプローチが必要です。

<iFrame>を使用したソリューション

<iframe>はyoutubeや他の多くのリモートサイトで機能します（Facebookなどの一部のサイトではX-Frame-Options 'を' DENY 'に設定してiframeを明示的にブロックしているため、このソリューションでもすべてのサイトで機能しません）。

ダイナミックコンテンツにiframeを使用する1つの方法は次のとおりです。

1）モーダルのボディ内に空のiframeを追加します。

<div class="modal-body">
    <iframe frameborder="0"></iframe>
</div>

2）モーダルダイアログボタンがクリックされたときにトリガーされるjqueryを追加します。次のコードは、data-src属性にリンク先があり、ボタンにクラスmodalButtonがあることを想定しています。また、オプションでdata-widthとdata-height-を指定できます。指定しない場合は、それぞれデフォルトで400と300になります（もちろん、これらは簡単に変更できます）。

次に、属性が<iframe>に設定され、iframeが指定されたページをロードします。

$('a.modalButton').on('click', function(e) {
    var src = $(this).attr('data-src');
    var height = $(this).attr('data-height') || 300;
    var width = $(this).attr('data-width') || 400;

    $("#myModal iframe").attr({'src':src,
                               'height': height,
                               'width': width});
});

3）クラスと属性をモーダルダイアログのアンカータグに追加します。

<a class="modalButton" data-toggle="modal" data-src="http://www.youtube.com/embed/Oc8sWN_jNF4?rel=0&wmode=transparent&fs=0" data-height=320 data-width=450 data-target="#myModal">Click me</a>

Demo Fiddle using youtube

36
KayakDave

事前にフォーマットされたWebページを表示する必要がある場合は、次のようなものが必要です。

$('#btn').click(function() {
    $.ajax({
        url: 'url-src/dialog.html',
        dataType: 'json',
        type: 'POST',
        success: function(data) {
            if (data.check) {
                var $modal = $(data.dialog);
                $('body').append($modal);
                $modal.filter('.modal').modal();
            } else {
                alert(data.dialog);
            }

        }
    });

});

dialog.htmlのhtml

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3>Dialog</h3>
        </div>
        <div class="modal-body">
            <form role="form"  class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="mutual">Example: </label>
                    <div class="col-sm-6">
                        <input type="text" id="example-form" value="" class="form-control">
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button id="edit-form"  data-id-mutual="" class="btn btn-primary">Save</button>
            <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

このhtmlにはフォームの例があり、ビデオを含むhtmlを追加する必要があります。

12
Figa17

おそらく古い投稿、私は以前に同様の問題を抱えていました。リンクを押して、テキストファイル（または他のファイル）のhrefをモーダルウィンドウ内のiframeに渡したいと思っていました、私はこのように解決しました：

function loadiframe(htmlHref) //load iframe
{
document.getElementById('targetiframe').src = htmlHref;
}


function unloadiframe() //just for the kicks of it
{
var frame = document.getElementById("targetiframe"),
frameHTML = frame.contentDocument || frame.contentWindow.document;
frameHTML.removeChild(frameDoc.documentElement);        
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


<a class=" btn btn-danger" onClick="loadiframe('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css')" data-toggle="modal" data-target="#myModal">LINK</a><!--link to iframe-->




<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      
      <div class="modal-header" style="border:hidden">
        <button type="button" class="close" onClick="unloadiframe()" data-dismiss="modal" aria-label="Close"><span aria-   hidden="true">&times;</span></button>
      </div>
      
      <div class="modal-body" style="padding-top:10px; padding-left:5px; padding-right:0px; padding-bottom:0px;">
        
      <iframe src="" frameborder="0" id="targetiframe" style=" height:500px; width:100%;" name="targetframe" allowtransparency="true"></iframe> <!-- target iframe -->
        
      </div> <!--modal-body-->
      
      <div class="modal-footer" style="margin-top:0px;">
        <button type="button" class="btn btn-default pull-right" data-dismiss="modal" onClick="unloadiframe()">close</button>
      </div>
      
    </div>
  </div>
</div>

したがって、この場合、ロードとアンロードを行うモーダルとiframeがそれぞれ1つだけです。

2
Sachi Cortes

this bootstrapダイアログへのヘルパー を試すことができます

ajaxリクエスト、iframe、コモンダイアログ、確認、プロンプトをサポートしています。

次のように使用できます。

eModal.iframe('http://someUrl.com', 'This is a tile for iframe', callbackIfNeeded);

eModal.alert('The message', 'This title');

eModal.ajax('/mypage.html', 'This is a ajax', callbackIfNeeded);

eModal.confirm('the question', 'The title', theMandatoryCallback);

eModal.Prompt('Form question', 'This is a ajax', theMandatoryCallback);

これにより、iframeの読み込み中に読み込みの進行状況がわかります！

Htmlは必要ありません。

追加のオプションのパラメーターとしてオブジェクトリテラルを使用できます。

サイトフォームの詳細を確認してください。

ベスト、

1
Samuel Pinto
function javascript_function(item_code)
{
var d = new Date();
var url_to_zoom='http://localhost.com/application/page.php?id=2&item_code='+item_code+'&reqdate='+d.getTime();

$('#modal_box').modal({keyboard:true,backdrop:true,show:true,remote:url_to_zoom});
}
0
Sunit