Load src of iframe using drop down menu and then change - javascript

I have the following code
<script type="text/javascript">
function newSrc() {
var e = document.getElementById("MySelectMenu");
var newSrc = e.options[e.selectedIndex].value;
document.getElementById("MyFrame").src=newSrc;
}
</script>
<iframe name="content" src="" style="position: absolute; left: 0px; top: 28px;" allowtransparency="true" border="0" scrolling="yes" width="100%" frameborder="0" height="90%" id="MyFrame"></iframe>
<select id="MySelectMenu">
<option value="http://www.example.com">Example Site 1</option>
<option value="http://www.example2.com">Example Site 2</option>
</select>
<button onClick="newSrc();">Load Site</button>
This works well, it loads the source of the iframe depending on what option is selected from the menu. Now, what I'd like to do, after the option is chosen from the drop down and the Load Site button is clicked, is load the source from the option into the iframe, and then redirect the iframe ONCE after say...1 second.
So if Example Site 2 is chosen, the user clicks Load Site, http://www.example2.com is loaded, and the iframe is then redirected to http://www.example2.com/admin.
Thanks

Just trying to help! Here's a solution (working example you can play with the code http://jsbin.com/cakuh/1/), it's just a sketch but you should understand what to do:
<iframe name="content" src="" style="position: absolute; left: 0px; top: 28px;" allowtransparency="true" border="0" scrolling="yes" width="100%" frameborder="0" height="90%" id="MyFrame"></iframe>
<select id="MySelectMenu">
<option value="http://www.games.com">Games</option>
<option value="http://www.bbc.com">BBC</option>
</select>
<button>Load Site</button>
$(function(){
$('button').on('click', function(){
var src = $("#MySelectMenu option:selected").attr('value'),
myTimeout = null;
// first we de-attach and re-attach an event load
$('iframe[name="content"]').off('load').on('load', function(){
myTimeout = setTimeout(function(){
clearTimeout(myTimeout);
$('iframe[name="content"]').off('load');
// you see, we concat '/admin' to the src
$('iframe[name="content"]').attr('src', src + '/admin');
}, 1000);
});
// this will change the iframe src and load the page, triggering the iframe load event
$('iframe[name="content"]').attr('src', src);
});
});

Related

On click Iframe need to load

When loading the page automatically iframe also loading, it must not have to do like that
When i click button, then only iframe need to load but in iframe there is url
Can you give me example in jsfiddle, please
<input type="button">Load</input>
<div class="copy">
<iframe id="font" src="${SubscriptionUrl }" frameborder="0" height="500px" width="100%"></iframe>
</div>
You can hide your iframe onload and then display when clicked.
<button id="btnLoad" type="button">Load</button>
<div class="copy">
<iframe style="display:none;" id="font" src="${SubscriptionUrl }" frameborder="0" height="500px" width="100%"></iframe>
</div>
<script>
const btnLoad= document.getElementById('btnLoad');
btnLoad.addEventListener("click", function(){
document.getElementById("font").style.display = "block";
});
</script>
Use an <a>nchor and an <iframe>. No JavaScript required.
Set a [name] attribute for <iframe>
ex. <iframe name="iframe0" src="about:blank" ...></iframe>
Set the <a>nchor [href] attribute to the url of intended destination.
ex. <a href="https://www.example.com" ...>...</a>
Set the <a>nchor [target] attribute to the <iframe> [name] attribute.
ex. <a href="https://www.example.com" target="iframe0"...>...</a>
Demo
html,
body {
height: 100%;
width: 100%;
font: 400 16px/1.5 Consolas;
}
.btn {
text-align: center;
}
a {
text-decoration: none;
}
<button class='btn'>
VIDEO
</button>
<figure class='box'>
<iframe name='frame0' src="about:blank" frameborder="0" width="480" height="270"></iframe>
</figure>
Initially set one attribute to iframe .While clicking button take the attribute from the iframe and set that to iframe src.
Just Check the fiddle

Swapping content of div, on click on image or iframe (Vimeo)

I have some issue:
I have some container, and three elements below this div. Three elements are images or iframe with vimeo embedded movie.
In first case i have :
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And below:
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span>
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</span>
</div>
And Jquery:
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
And now what this code does:
On clicking on video2.jog or video3.jpg, iframe in <div id="media-content"> is replaced with this clicked image. And this is ok.
But i want to show vimeo movie <div id="media-content"> on click at iframe inside.
So it's simple content swap, but the problem is, that i don't know how "transfer" vimeo iframe do another div, as clicking on it does nothing.
Thank You for any reply.
PS: To address this question, i send image, it shows 3 red spans and one big green div. CLicking on span should set his attr (in this case img).And this work, problem is,that clicking on vimeo span should open video in green div.enter image description here
When the browser loads/makes ready the DOM then iframe isn't included instantly. For the shake javascript or jquery canot get the inside element of the iframe as DOM haven't it, rather javascript or jquery only get the iframe tag.This is a critical and great problem with jquery & iframe when iframe load thing from different domain/host.
You can also get the iframe element by getting the span with jquery. But for this you have to give the 3rd span a a div and have to click on the div not on the iframe content to get desired solution.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span >
<div style="border: 1px solid red; z-index:3;width:80px;height:80px;padding:30px;">
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</span>
</div>
<script>
$(document).ready(function () {
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
var media2 = $('#media-list div');
$(media2).on('click',function(e){
var vals = $(this).html();
$(mediaContainer).html(vals).height("70%").width("70%");
e.preventDefault();
console.log (e.target);
});
});
</script>

selection menu for iframe src using javascript

I found out how to use javascript to change the iframe src, but when I made a selection menu that allows you to choose the url to load in, it only loads the first option in the menu, even when you select a different url. I got it to work once, but I made a few changes and it wouldn't let me go all the way back with undo. Here's what I've got:
<iframe src="http://jquery.com/" id="myFrame" width="500" height="500" scrolling="no" frameborder="0"></iframe>
<div>
<select id="selected2">
<option value="http://linux.com">1</option>
<option value="http://microsoft.com">2</option>
<option value="http://apple.com">3</option>
</select>
<button onclick="loadPages()">Click Me</button>
<script>
function loadPages() {
var loc = dataCap;
document.getElementById('myFrame').setAttribute('src', loc);
}
var dataCap = document.getElementById("selected2").value;
</script>
The thing is that you're only getting the value the first time around, when your script executes. In order to get the currently selected value, you need to get the value right when you click the button, inside of the onclick function.
http://jsfiddle.net/v74ypgwk/1/
<iframe src="http://jquery.com/" id="myFrame" width="500" height="500" scrolling="no" frameborder="0"></iframe>
<div>
<select id="selected2">
<option value="http://linux.com">1</option>
<option value="http://microsoft.com">2</option>
<option value="http://apple.com">3</option>
</select>
<button onclick="loadPages()">Click Me</button>
<script>
var urlSelect = document.getElementById('selected2'),
myFrame = document.getElementById('myFrame');
function loadPages() {
var loc = urlSelect.value;
// You can also do -> myFrame.src = loc;
myFrame.setAttribute('src', loc);
}
</script>

Change YouTube iframe src with jQuery

I am trying to change a YouTube video iframe source with jQuery, but looks like running into cross origin issue. My jquery code:
var videourl = $(".videourl").html();
$(".actualyoutube iframe").attr('src',videourl);
iframe gets new src value, but no video is displayed. Any ideas?
extended explanation:
There is a popup div with embeded youtube video
<div class="youtubepopup">
<div class="closeyoutube">X</div>
<div class="actualyoutube">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
There is a certain td which contains a new src url. There is no other place or way to get this url except from this td.
<td class="videourl">//youtube.com/whatevervideo</td>
And there is a script that should add src on open popup and remove on closing.
var videourl = $(".videourl").html();
$(".youtubecap").click(function() {
$(".actualyoutube iframe").attr('src', videourl);
$(".youtubepopup").fadeIn('slow');
});
$(".closeyoutube").click(function() {
$(".youtubepopup").fadeOut('slow');
$(".actualyoutube iframe").removeAttr('src');
});
$(".youtubepopup").click(function() {
$(".youtubepopup").fadeOut('slow');
});
p.s. now that i laid it out, user3385530 is probably right
You cannot show pages from www.youtube.com inside an iframe. The correct way is to use their video embed codes inside your web page. IFrame embeds are easier, the URL you need to display in an iframe looks like this:
http://www.youtube.com/embed/VIDEO_ID_GOES_HERE
Just place an iframe such as this inside your web page:
<div class="actualyoutube">
<iframe width="560" height="315" src="http://www.youtube.com/embed/VIDEO_ID_GOES_HERE" frameborder="0" allowfullscreen></iframe>
</div>
Finally, assuming you are able to extract video id from the URLs using jQuery, you can use this to display videos*:
var videoid = "S2ISrpNM-0s";
$(".actualyoutube iframe").remove();
$('<iframe width="420" height="315" frameborder="0" allowfullscreen></iframe>')
.attr("src", "http://www.youtube.com/embed/" + videoid)
.appendTo(".actualyoutube");
* Changing the src property of an iframe that is already displaying a YouTube video did not work; I therefore suggest destroy-iframe-recreate-iframe approach.
<div class="service-video-media">
<iframe id="main-play" width="560" height="315" src="https://www.youtube.com/embed/uTcj2v85y34" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="video-list">
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
</div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.video-list img').on('click',function () {
var videoId = jQuery(this).attr('video-id');
var videoUrl = 'https://www.youtube.com/embed/'+videoId;
jQuery('#main-play').attr('src',videoUrl);
});
});
</script>
This will not work because page is parsed and only on refresh with new ulr will happen.
You need to use ajax to pre-load the page with new url and then to set iframe.

Update the href of a Iframe link in html

So here's my situation.
I have a page HTML that displays a YouTube video, using a standard iFrame link. What I am trying to do is have a text box on my page where people would enter a video's ID and the video would reload with the new link or video ID entered.
Code HTML:
<p> Type your video's ID here: <input type="text" name="VideoID"></p>
<iframe title="YouTube video player" src="http://www.youtube.com/embed/hqiNL4Hn04A" width="480" height="390" frameborder="0"></iframe></p>
You need to request the video ID within a form like
<p>
<form id="getytid">
<label>Type your video's ID here:</label>
<input type="text" name="VideoID" />
<input type="submit" value="go" />
</form>
</p>
<p>
<iframe id="theFrame" title="YouTube video player" src="" width="480" height="390" frameborder="0"></iframe>
</p>
Notice we assigned an ID to the form and the iframe so we can manipulate them through jQuery.
Then you could use this code to update the iframe with a new video ID :
jQuery(document).ready(function($) {
$("#getytid").on("submit", function (e) {
e.preventDefault();
$("#theFrame").attr("src", "http://www.youtube.com/embed/" + $("input[name=VideoID]").val()+"?autoplay=1")
}); // on
}); // ready
See JSFIDDLE
NOTE:
The initial iframe html doesn't have any src attribute set. You can leave it empty until the visitor inputs an ID or you can fill it with a default video path
you should look at this post as I think this is what you want.
dynamically set iframe src
http://jsfiddle.net/MALuP/
<script type="text/javascript">
function iframeDidLoad() {
alert('Done');
}
function newSite() {
var sites = ['http://getprismatic.com',
'http://gizmodo.com/',
'http://lifehacker.com/']
document.getElementById('myIframe').src = sites[Math.floor(Math.random() * sites.length)];
}
</script>
<input type="button" value="Change site" onClick="newSite()" />
Save the youtube url as a variable.
Html:
<input type="text" name="VideoID" id="youtubevid" />
JS:
var youtube = "http://www.youtube.com/embed/"; // base
var video;
var url;
// set value
$('#youtubevid').on('change', function() {
video = $('#youtubevid').val();
url = youtube + video;
// set link attribute here in iframe.
//$('#idofiframehere').attr('src', url);
});

Categories

Resources