在不更新页面的情况下更改 iframe src答案

【问题标题】：Change iframe src without page update在不更新页面的情况下更改 iframe src
【发布时间】：2023-03-24 16:25:02
【问题描述】：

查看我的 HTML 代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<div id="myModal" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
                <p class="modal-title">SECRETS OF SUPERIOR CUSTOMER SERVICE (July 22, 2016)</p>
         </div>
        <div class="modal-body">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="http://chishare.cc/embed/2107778410/" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
             </div>
         </div>
         <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
         </div>

    </div>
</div>

我的主要问题是：如何在不刷新页面的情况下更改此 iframe src 视频？像这样：

<button type="button" onclick="src1()">Change to video 1</button>
<button type="button" onclick="src2()">Change to video 2</button>
<button type="button" onclick="src3()">Change to video 3</button>
<button type="button" onclick="src4()">Change to video 4</button>

以及它们各自的功能：

function src1(){
-- Change the iframe src link of myModal
}

function src2(){
-- Change the iframe src link of myModal
}
...

你能帮帮我吗？谢谢

【问题讨论】：

更改src 意味着刷新页面。你想做什么？
尝试在不刷新页面的情况下更改 src 链接，当我单击“更改为视频 3”时，请在单击“启动演示模式”之前更新 iframe 链接

标签： javascript html modal-dialog bootstrap-modal

【解决方案1】：

第 1 步：为 iframe 使用 ID...

<iframe id="FrameId"></iframe>

第 2 步：更新按钮...

<button type="button" onclick="ChangeSource(1);">Change to video 1</button>

第 3 步：包含此功能...

function ChangeSource(Button){
if(Button==1){FrameId.src='URL 1';} else 
if(Button==2){FrameId.src='URL 2';} else 
if(Button==3){FrameId.src='URL 3';} else 
if(Button==4){FrameId.src='URL 4';}
}

【讨论】：

【解决方案2】：

我建议使用 1 个函数而不是 4 个函数，并将链接作为数据添加到每个按钮内。您还可以在运行时动态添加这些链接。我在按钮 1 的演示中使用了来自 youtube 的占位符视频，如您所见，您可以使用以下 jQuery 函数切换 iframe src。

$( document ).ready(function() {
  $('.changer').click(function(e){
    changeIframe(e);
  })
})

function changeIframe(e) {
  var link = $(e.currentTarget).data('link');
  $('.embed-responsive-item').attr('src',link);
  alert('link is now '+link);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<div>
  <button class="changer" type="button" data-link="https://www.youtube.com/watch?v=ScMzIvxBSi4">Change to video 1</button>
  <button class="changer" type="button" data-link="">Change to video 2</button>
  <button class="changer" type="button" data-link="">Change to video 3</button>
  <button class="changer" type="button" data-link="">Change to video 4</button>
</div>

<div id="myModal" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
                <p class="modal-title">SECRETS OF SUPERIOR CUSTOMER SERVICE (July 22, 2016)</p>
         </div>
        <div class="modal-body">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="http://chishare.cc/embed/2107778410/" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
             </div>
         </div>
         <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
         </div>

    </div>
</div>

【讨论】：