Utilisation de modes bootstrap 3.0 pour charger des contenus dynamiques et distants dans un iframe

Pourquoi les data-remote ou href fonctionnent-elles pas sur des sites distants comme Youtube?

Le mode de bootstrap de Twitter utilise AJAX pour charger du contenu distant via data-remote / href . AJAX est contraint par la même politique d'origine afin d'accéder à un site d'origine différente, comme youtube, produira cette erreur:

Aucun en-tête «Access-Control-Allow-Origin» n'est présent sur la ressource demandée

Donc, ni data-remote ni href ne feront ce que vous voulez.

JSON : Si vous receviez des données de json, alors vous pourriez utiliser JSONP . Mais puisque vous avez besoin de html, pas de json, à partir de sites comme YouTube, nous avons besoin d'une autre approche:

Solution utilisant <iFrame>

Un <iframe> fonctionnera pour youtube et plusieurs autres sites distants (même cette solition ne fonctionne pas pour tous les sites car certains, comme Facebook, bloquent explicitement les iframes en définissant X-Frame-Options 'à' DENY ').

Une façon d'utiliser un iframe pour un contenu dynamique est la suivante:

1) Ajoutez un iframe vide dans le corps de votre mode:

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

2) ajoutez un jquery déclenché lorsque le bouton de dialogue modal est cliqué. Le code suivant attend une destination de lien dans un attribut data-src et pour que le bouton ait une classe modalButton . Et, facultativement, vous pouvez spécifier data-width data-height et data-height , sinon ils sont par défaut à 400 et 300 respectivement (bien sûr, vous pouvez facilement les modifier).

Les attributs sont ensuite définis sur <iframe> qui provoque l'iframe pour charger la page spécifiée.

 $('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) ajoute la classe et les attributs à la balise d'ancrage de la boîte de dialogue modale:

 <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 à l'aide de youtube

Si vous avez besoin d'afficher une page Web préformatée, avez besoin de quelque chose comme ça

 $('#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); } } }); }); 

Html du dialogue.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 --> 

Ce html a un exemple de formulaire, il faut ajouter un html avec une vidéo à l'intérieur.

Probablement une ancienne publication, j'ai eu un problème similaire il y a quelque temps, je voulais appuyer sur un lien, qui passerait le fichier href d'un fichier texte (ou de tout autre fichier) à un iframe à l'intérieur d'une fenêtre modale, je résolais comme ceci:

 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> 

Vous pouvez essayer cette aide de démarrage vers les boîtes de dialogue

Il prend en charge la requête ajax, les iframes, les dialogues communs, confirme et invite!

Vous pouvez l'utiliser comme suit:

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

Cela fournit une progression de chargement tout en chargeant l'iframe!

Aucun html requis.

Vous pouvez utiliser un littéral d'objet comme paramètre pour des options supplémentaires.

Vérifiez le site plus de détails.

meilleur,

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