Question

我有一个加载“ iframe”的按钮，另一个加载了“ iframe”的按钮，我想将两个功能合并为一个按钮。我不知道这是否可能。我想要有人帮助我。

<button class="hashtag" id="load">PLAY</button>
<button class="hashtag" onclick="parent.closeIFrame();">STOP</button>

<button class="hashtag" id="load">PLAY</button>
<!--<iframe id="myFrame" scrolling="no" src="https://www.rtp.pt/play/popup/antena3#player_prog" style="width:0;height:0;border:0; border:none;"></iframe>-->
<button class="hashtag" onclick="parent.closeIFrame();">STOP</button>

<script>
  function closeIFrame() {
    $('#myFrame').remove();
  }
</script>


<div id="iframeHolder" style="opacity:0;width:0;height:0;"></div>
<script>
  $(function() {
    $('#load').click(function() {
      $('#iframeHolder').html('<iframe id="myFrame" scrolling="no" style="border:0px;" src="https://example" style="width:0;height:0;border:0; border:none;"></iframe>');
    });
  });
</script>

谢谢。

Answer 1

因此，我将其设置为一个按钮，并在单击后将文本更改为STOP，还切换了一个变量以跟踪是否已加载iFrame。如果在显示STOP（停止）时单击它，则会运行关闭功能并将其切换回PLAY。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="hashtag" id="load">PLAY</button>

<div id="iframeHolder" style="opacity:0;width:0;height:0;"></div> 
<script>

  var loaded = false;
  $(function(){
      $('#load').click(function(){ 
          if (!loaded) {
            $('#load').text("STOP")
            $('#iframeHolder').html('<iframe id="myFrame" scrolling="no" style="border:0px;" src="https://example" style="width:0;height:0;border:0; border:none;"></iframe>');
            loaded = true;
          } else {
            $('#load').text("PLAY")
            $('#myFrame').remove();
            loaded = false;
          }
      });   
  });
</script>

Answer 2

尝试一下：

$(document).ready(function(){
    $(".play").click(function(){
      $(this).toggleClass("play close");
      $(".hidden").toggleClass("show hidden");

      if($(this).hasClass("close")){
        $(this).html("CLOSE");
        $("iframe").css({"display" : "block"})
      }else{
        $(this).html("PLAY");
        $("iframe").css({"display" : "none"})
      }
    });
  });

.play{
  color: black;
}
.close{
  color: red;
}
.hidden{
  display: none;
}
.show{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="play">PLAY</button>
<iframe class="hidden"></iframe>

告诉我它是否适合您

javascript-在1中加入2个按钮

2 个答案: