在页面刷新后更改默认的iframe src onclick并保留src？ [英] Change default iframe src onclick and retain src after page refresh?
本文介绍了在页面刷新后更改默认的iframe src onclick并保留src？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在页面上有以下iframe和缩略图。我如何使用JavaScript，以便每当单击缩略图时，data-embed-src就成为iframe的默认src？
< iframe name =starterVIDid =starterVIDwidth =870height =498src =https://www.youtube.com/embed/frameborder =0allowfullscreen scrolling =no >< / iframe中>
< / li>
< li class =span9>
< h3>示例< / h3>
< ul class =thumbnails>
< li class =span3>< a class =thumbnail cboxElement rel =colorboxdata-embed-src =http://player.vimeo.com/video/href =http://vimeo.com/>< img src =https：// i.vimeocdn.com/video/alt => Vid< / a> < /锂>
< li class =span3>< a class =thumbnail cboxElement =colorboxdata-embed-src =http://player.vimeo.com/video /href =http://vimeo.com/>< img src =https://i.vimeocdn.com/video/alt => Vid0< / a> < /锂>
<！ - < li class =span3>< a class =thumbnail cboxElement =colorboxdata-embed-src =http://player.vimeo.com/video/href =https://vimeo.com/>< img src =https://i.vimeocdn.com/video/alt = > VID1< / A>< /锂>
- >
< li class =span3>< a class =thumbnail cboxElement =colorboxdata-embed-src =http://player.vimeo.com/video /href =https://vimeo.com/>< img src =https://i.vimeocdn.com/video/alt => Vid2< / a>< / li> ;
< / li>
< / ul>
< ul class =thumbnails>
< li class =span3>< a class =thumbnail cboxElement =colorboxdata-embed-src =https://www.youtube.com/embed /href =http://www.youtube.com/watch>< img src =http://i4.ytimg.com/vi/alt => Vid3< / a>< ; /立GT;
< li class =span3>< a class =thumbnail cboxElement =colorboxdata-embed-src =http://player.vimeo.com/video /href =https://vimeo.com/>< img src =https://i.vimeocdn.com/video/alt => Vid4< / a>< / li> ;
< li class =span3>< a class =thumbnail cboxElement =colorboxdata-embed-src =http：//player.vimeo .com / video /href =https://vimeo.com/>< img src =https://i.vimeocdn.com/video/alt => Vid5< / a> < /锂>
< li class =span3>< a class =thumbnail cboxElement =colorboxdata-embed-src =https://goo.gl/> < img src =https://goo.gl/alt =>图片< / a>< / li>
下面的JavaScript，但是，因为我没有多少运气这种方法，我想尝试一种不同的方法：
<< ; script type =text / javascript>
函数setIframeSource（）{
var theSelect = document.getElementById（'choice'）;
var theIframe = document.getElementById（'starterVID'）;
var theUrl;
theUrl = theSelect.options [theSelect.selectedIndex] .value;
theIframe.src = theUrl;
}
< / script>
< script>
函数loadFrame（val，id）{
localStorage.setItem（val，id）; $（b）
（localStorage.getItem（'starterVID'））;
}
}
< / script>
解决方案
要检索 getAttribute（） 。
getAttribute（）返回元素上指定属性的值。如果给定的属性不存在，则返回的值将是null或（空字符串）;
function setIframeSource（vid）{var vid = vid.getAttribute（'data-source'）; var theIframe = document.getElementById（'myframe'）; theIframe.src = vid;}
body {display：flex ;对齐项：中心; justify-content：space-around;}
< p> ;< a data-source =https://youtube.com/embed/t2ByLmLnYJ8onclick =setIframeSource（this）; return false; href =https://youtube.com/embed/fORZASxZMEQ>播放iframe视频？< / a>< / p>< iframe src =https://stackoverflow.com/questions/46289527/change < / iframe>< p>< a data-source =https://youtube.com/embed/fORZASxZMEQonclick =setIframeSource（这个）;返回false; href =https://youtube.com/embed/fORZASxZMEQ>播放astro影片？< / a>< / p>
<关于本地存储，你应该加载，检查是否有任何数据尚未使用，否则使用默认的URL。
$ b $ / $>示例
window.onload = function（）{
var loadvid = localStorage。的getItem（ 测试）;
if（loadvid）{//如果检索到任何东西
setIframeSource（''，loadvid）;
} else {// if if empty
var theIframe = document.getElementById（myframe）;
var defaultUrl = theIframe.getAttribute（'data-src'）;
theIframe.src = defaultUrl;
}
};
函数setIframeSource（vid，video）{
if（！video）{//如果不是来自onload或者空的
var video = vid.getAttribute（data-source）;
}
var theIframe = document.getElementById（myframe）;
video = video.replace（// g，''）;
theIframe.src = video;
if（vid）{//如果来自onclick，则将其存储
localStorage.setItem（test，JSON.stringify（video））;
}
}
https://codepen.io/gc-nomade/pen/yzOVEL
I have the following iframe and thumbnails on a page. How can I use javascript so that whenever a thumbnail is clicked, the data-embed-src becomes the default src for the iframe?
<iframe name = "starterVID" id = "starterVID" width="870" height="498" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen scrolling="no"></iframe>
</li>
<li class="span9">
<h3>Example</h3>
<ul class="thumbnails">
<li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="http://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid </a> </li>
<li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="http://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid0 </a> </li>
<!-- <li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="https://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid1</a></li>
-->
<li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="https://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid2</a></li>
</li>
</ul>
<ul class="thumbnails">
<li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="https://www.youtube.com/embed/" href="http://www.youtube.com/watch"><img src="http://i4.ytimg.com/vi/" alt="">Vid3</a></li>
<li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="https://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid4</a></li>
<li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="https://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid5</a></li>
<li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="https://goo.gl/"><img src="https://goo.gl/" alt="">Picture</a></li>
I had the most success using the following javascript, however since I haven't had much luck with this approach I was thinking of trying a different approach:
<script type="text/javascript">
function setIframeSource() {
var theSelect = document.getElementById('choice');
var theIframe = document.getElementById('starterVID');
var theUrl;
theUrl = theSelect.options[theSelect.selectedIndex].value;
theIframe.src = theUrl;
}
</script>
<script>
function loadFrame(val, id){
localStorage.setItem(val, id);
if(typeof localStorage.getItem('starterVID') != 'undefined'){
$('select').val(localStorage.getItem('starterVID'));
}
}
</script>
解决方案
To retrieve the value of a data-attribute, i believe you should use getAttribute().
getAttribute()returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either benullor""(the empty string);
function setIframeSource(vid) {
var vid = vid.getAttribute('data-source');
var theIframe = document.getElementById('myframe');
theIframe.src = vid;
}
body {
display:flex;
align-items:center;
justify-content:space-around;
}
<p><a data-source="https://youtube.com/embed/t2ByLmLnYJ8" onclick="setIframeSource(this);return false;" href="https://youtube.com/embed/fORZASxZMEQ">Play Iframe video ?</a>
</p><iframe src="https://stackoverflow.com/questions/46289527/change-default-iframe-src-onclick" id="myframe"></iframe>
<p><a data-source="https://youtube.com/embed/fORZASxZMEQ" onclick="setIframeSource(this);return false;" href="https://youtube.com/embed/fORZASxZMEQ">Play astro video ?</a>
</p>
About local storage, you should on load, check if there is any data yet to use, else use a default url.
example
window.onload = function() {
var loadvid = localStorage.getItem("test");
if (loadvid) {//if anything retrieved
setIframeSource('', loadvid);
} else {// if empty yet
var theIframe = document.getElementById("myframe");
var defaultUrl = theIframe.getAttribute('data-src');
theIframe.src = defaultUrl;
}
};
function setIframeSource(vid, video) {
if (!video) {// if not from onload or empty yet
var video = vid.getAttribute("data-source");
}
var theIframe = document.getElementById("myframe");
video = video.replace(/"/g, '');
theIframe.src = video;
if (vid) {// if from onclick , then store it
localStorage.setItem("test", JSON.stringify(video));
}
}
https://codepen.io/gc-nomade/pen/yzOVEL
这篇关于在页面刷新后更改默认的iframe src onclick并保留src？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
