如何打开模态框并在模态框内切换 iframe src

Posted 2023-05-09

【中文标题】如何打开模态框并在模态框内切换 iframe src

【英文标题】：how to open a modal and switch the iframe src inside the modal

【发布时间】：2016-09-13 18:09:24

【问题描述】：

我的应用程序中有一个模式，当前使用 bootsrap 打开：

<div class="modal full-page fade" tabindex="-1" role="dialog" id="fullpageModal">
    <div class="full-page-content">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
         <iframe src="http://www.example.com/id/1"></iframe>

在我的 html 中，我有一个附加到函数的按钮：

<button (click)="initPlay(2)" data-toggle="modal" data-target="#fullpageModal" >PLAY</button>

目前bootstrap打开modal，Angular处理点击。

需要做的是：

用户点击按钮 iFrame URL src 根据点击的按钮更新 使模态可见。

我认为我需要做的是：

从引导程序中移除模态框的开口并将其交给 Angular2 在按钮点击功能更新 iframe src 该函数然后打开模态（或将其交还给 Bootstrap？）

我的问题：

更新 iframe src 的最佳方法是什么？也许要包含一个变量：iframeSrc 并在点击后更新它？

处理模态打开的最佳方法是什么？

谢谢！

【问题讨论】：

在 bootstrap 的 js 中使用 Angular 可能会一团糟。你可以看看angular-ui.github.io/bootstrap，因为他们已经完成了繁重的工作。

【参考方案1】：

其实这很简单。

我创建了两个函数：

initPlay(id) 
    this.iframeSrc = "http://example.com/game/" + id;


clearPlay() 
    this.iframeSrc = "";

我离开 bootstrap 来管理模式打开和关闭，并简单地使用 Angular2 (click) 方法来启动 src 更改。

我在 iframe 中添加了一个“加载”类来显示正在执行的操作。

就是这样。