检查中的值,并附加给定值

时间:2016-12-29 09:08:47

标签: javascript jquery html

在我的网址中,我想检查自动播放是否存在,然后替换该值。 在我的iframe中,我有网址https://www.youtube.com/embed/C0DPdy98e4c?width=640 在那个网址中,我想检查自动播放是否存在。如果不需要在播放按钮点击中添加自动播放= 1的网址。



 jQuery(document).ready(function($) {
      $('.playButton').click(function() {
       
        alert('play');
     $('.flex-active-slide iframe').contents().find("iframe")[0].src += "&autoplay=1"; //need to check autoplay and append with src
        $("iframe").src = src.replace(/\&autoplay\=\d/, "&autoplay=" + 1);
      });

      $(".close_icon").click(function() {
        alert('close');
        $("iframe").src = src.replace(/\&autoplay\=\d/, "&autoplay=" + 0);
      });
    });

  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-active-slide">
    <iframe src="https://www.youtube.com/embed/C0DPdy98e4c?width=640"></iframe>
</div>
    <div class="playButton">Play</div>
    <div class="close_icon">Close</div>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:1)

&#13;
&#13;
 jQuery(document).ready(function($) {
      $('.playButton').click(function() {
       
        alert('play');
        if(/\&autoplay\=\d/.test($('.flex-active-slide iframe')[0].src)) {
          $('.flex-active-slide iframe')[0].src = $('.flex-active-slide iframe')[0].src.replace(/\&autoplay\=\d/, "&autoplay=" + 1);
        } else {
          $('.flex-active-slide iframe')[0].src += "&autoplay=1"; //need to check autoplay and append with src
        }
      });

      $(".close_icon").click(function() {
        alert('close');
        $("iframe")[0].src = $("iframe")[0].src.replace(/\&autoplay\=\d/, "&autoplay=" + 0);
      });
    });
&#13;
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-active-slide">
    <iframe src="https://www.youtube.com/embed/C0DPdy98e4c?width=640"></iframe>
</div>
    <div class="playButton">Play</div>
    <div class="close_icon">Close</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您可以尝试javascript字符串函数indexOf来检查自动播放存在

jQuery(document).ready(function($) {
      $('.playButton').click(function() {       
         var src=$('.flex-active-slide iframe').contents().find("iframe")[0].src; 
        if(src.indexOf("autoplay") == -1){
           $('.flex-active-slide iframe').contents().find("iframe")[0].src += "&autoplay=1"; //need to check autoplay and append with src
        }
        $("iframe").src = src.replace(/\&autoplay\=\d/, "&autoplay=" + 1);
      });

      $(".close_icon").click(function() {
        alert('close');
        $("iframe").src = src.replace(/\&autoplay\=\d/, "&autoplay=" + 0);
      });
    });

答案 2 :(得分:1)

我写了一个可靠的功能供您使用。

用法:autoplayURL(url string, autoplayOn/Off bool);

返回格式化字符串以打开或关闭自动播放。

默认情况下,如果不解析第二个参数,则自动播放将打开。

jQuery(document).ready(function($) {
	$('.playButton').click(function() {
		$("#youtube-iframe").attr("src", autoplayURL($("#youtube-iframe").attr("src")));
	});

	$(".close_icon").click(function() {
		$("#youtube-iframe").attr("src", autoplayURL($("#youtube-iframe").attr("src"), false));
	});
});
			
function autoplayURL(youtubeURL, autoplay) {
	// Set default value of autoplay
	if (autoplay === undefined)
		autoplay = true;

	autoplay = autoplay ? 1 : 0;

	// Remove trailing / from URL
	if (youtubeURL.endsWith("/"))
		youtubeURL = youtubeURL.substr(0, youtubeURL.length - 1);

	// Add ? to end of URL if it doesn't exist
	if (youtubeURL.indexOf('?') === -1) {
		youtubeURL += "?autoplay=" + autoplay;
		return youtubeURL;
	}

	var autoplayOpposite = autoplay === 0 ? 1 : 0;

	if (youtubeURL.indexOf('autoplay=') === -1) {
		// If URL does not contain 'autoplay=' then append to URL.
		youtubeURL += "&autoplay=" + autoplay;
	} else if (youtubeURL.indexOf('autoplay=' + autoplayOpposite) !== -1) {
		// If URL contains 'autoplay=0' then replace it with 'autoplay=1'.
		var firstPart = youtubeURL.substr(0, youtubeURL.indexOf('autoplay=' + autoplayOpposite));
		var lastPart = youtubeURL.substr(youtubeURL.indexOf('autoplay=' + autoplayOpposite)+10);
		youtubeURL = firstPart + "autoplay=" + autoplay + lastPart;
	}
	return youtubeURL;
}
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-active-slide">
    <iframe src="https://www.youtube.com/embed/C0DPdy98e4c?width=640" id="youtube-iframe"></iframe>
</div>
    <div class="playButton">Play</div>
    <div class="close_icon">Close</div>

答案 3 :(得分:1)

您也可以使用索引,但如果您的网址在其他地方包含单词autoplay,那么它可能会爆炸示例:“https://www.youtube.com/embed/ 自动播放 C0DPdy98e4c?width = 640”。试试这个(假设你总是在url的末尾追加自动播放):

jQuery(document).ready(function($) {
  $('.playButton').click(function() {

    alert('play');
    var srcArr = $('.flex-active-slide iframe')[0].src.split('&')
    var src = srcArr[srcArr.length-1];
 $('.flex-active-slide iframe')[0].src = src+"&autoplay=1"; 
    $("iframe")[0].src = src.replace(/\&autoplay\=\d/, "&autoplay=" + 1);
  });

  $(".close_icon").click(function() {
    alert('close');
    $("iframe")[0].src = src.replace(/\&autoplay\=\d/, "&autoplay=" + 0);
  });
});

答案 4 :(得分:1)

这是我的解决方案。代码评论很多,所以应该是自我解释,但如果有任何不清楚的地方,请告诉我。

希望它对你有用。

$('.playButton').click(function() {
 
 // get the current iframe url.
  var originalSrc = $('.flex-active-slide iframe').attr('src');
 
 //check if the autoplay=0 is part of the url.
  var autoplayPos = originalSrc.indexOf("?&autoplay=0")
  if (autoplayPos >= 0){
    // if it is lets remove it.
    originalSrc = originalSrc.substring(0,autoplayPos);
  } 
  
  // set the new url to our original url (without autoplay=0) with autoplay=1 apended
  var newSrc = originalSrc + "?&autoplay=1";
  
  // set the iframe source to the new url.
  $('.flex-active-slide iframe').attr('src', newSrc);
});

$(".close_icon").click(function() {
  // get the current iframe url.
  var originalSrc = $('.flex-active-slide iframe').attr('src')
  
  // we dont bother checking if auotplay is already there since the site will always start with it not there (i assume).
  
  // set new with, replace autoplay=1 with autoplay=0
  var newSrc = originalSrc.replace("?&autoplay=1", "?&autoplay=0");
  
  // set the iframe source to the new url.
  $('.flex-active-slide iframe').attr('src', newSrc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="flex-active-slide">
  <iframe src="https://www.youtube.com/embed/C0DPdy98e4c?width=640"></iframe>
</div>
<div class="playButton">Play</div>
<div class="close_icon">Close</div>