Javascript 在jQuery中提取引导iframe模式的发送方信息

我试图在Bootstrap4.0测试版中以模式显示Google地图

我发现，代码可以工作，但我对jQuery不够“流利”，无法用Javascript完成我需要它完成的任务。我还想知道如何找到发件人，但我想不出来

假设我的

声明如下：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#google-map-modal" data-source="https://www.google.com/maps/embed?a-whole-bunch-of-gibberish"><i class="icon-food"></i> Graceland Directions</button>

Graceland方向

…在我的

中，我设置了基本模式

<footer>
  <!-- Code for map modal -->
  <div class="modal fade" id="google-map-modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div class="close">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" frameborder="0"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>

&时代；

我在上找到了这个答案，这正是我想要做的，但地址已硬编码到示例中：

// Bootstrap modal Google Map
$('#google-map-modal').on('shown.bs.modal', (function() {
  console.log("something happened");
  var mapIsAdded = false;

  return function() {
    if (!mapIsAdded) {
      $('.modal-body').html('<h1>Test</h1><br><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d9808.974038062652!2d4.3244048859985185!3d52.07529689519739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1419588821379" width="100%" height="400" frameborder="0" style="border:0"></iframe>');

      mapIsAdded = true;
    }
  };
})());

//引导模式谷歌地图
$（'#google map modal'）.on（'show.bs.modal'，（function（））{
log（“发生了什么事”）；
var mapIsAdded=false；
返回函数（）{
如果（！mapIsAdded）{
$（'.modal body'）.html（'Test
'）；
mapIsAdded=true；
}
};
})());

//引导模式谷歌地图
$（'#google map modal'）.on（'show.bs.modal'，（function（））{
log（“发生了什么事”）；
var mapIsAdded=false；
返回函数（）{
如果（！mapIsAdded）{
$（'.modal body'）.html（'Test
'）；
mapIsAdded=true；
}
};
})());

格雷斯兰方向图
国王！
这里是去Graceland的方向

格雷斯兰方向
&时代；
是否可以使用

从OP更新：

这条代码让我越过了终点线：

$('#google-map-modal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var locationName = button.text();
  var locationUrl = button.attr('data-source');
  var modal = $(this)
  modal.find('.modal-title').text(locationName);
  modal.find('.modal-body').html('<iframe src="'+locationUrl+'"width="100%" height="400" frameborder="0" style="border:0"></iframe>');
})

$（“#谷歌地图模式”）.on（'show.bs.modal'，函数（事件）{
var button=$（event.relatedTarget）//触发模式
var locationName=button.text（）；
var locationUrl=button.attr（'data-source'）；
var modal=$（此）
modal.find（'.modal title'）.text（locationName）；
modal.find（'.modal body'）.html（''）；
})
你是什么意思？我被算清了。我用代码更新了你的帖子，让我越过了终点线。我知道我必须做什么，只是不知道语法。谢谢你给我指明了正确的方向。
$('#google-map-modal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var locationName = button.text();
  var locationUrl = button.attr('data-source');
  var modal = $(this)
  modal.find('.modal-title').text(locationName);
  modal.find('.modal-body').html('<iframe src="'+locationUrl+'"width="100%" height="400" frameborder="0" style="border:0"></iframe>');
})