selection menu for iframe src using javascript - 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>

Related

How can I insert a variable in iframe src to reach felixibilty for open the various sites? (by: html page and javascript )

I want my users to open their desired sites from my website, for this manner I need to insert a variable in src of iframe which change by user input strings.
Indeed I need a type of code like bellow:
<html>
<body>
<script type="text/javascript">
var userInput_stringVariable= "this part is user desired input string" ;
var adress= "https://en.wikipedia.org/wiki/" + userInput_stringVariable ;
</script>
<iframe src=adress width="100%" height="100%" frameborder="0"></iframe>
</body>
</html>
This code doesn't work, while I need a code like this to work with!
A textfield where user can enter whatever they would like to search on wikipedia or whatever website you want, a submit button which will call a function after it is clicked. answer.value will give the value of textfield and it's concatenated with website initial url.
HTML
<input type="text" name="inputField" id="answer" placeholder="Enter what you wanna search">
<button type="button" name="button" onclick="mySubmit()">Submit</button>
<iframe id="search" src="" width="100%" height="100%" frameborder="0"></iframe>
Script
<script>
function mySubmit() {
let getInput = answer.value;
var address;
address = "https://en.wikipedia.org/wiki/" + getInput;
document.getElementById('search').src = address;
}
</script>
Here is a function that will probably do what you want:
<script type="text/javascript">
function selectPage() {
var userImput_stringVariable = prompt("desired imput string");
if (userImput_stringVariable != null) {
document.getElementById("getPage").innerHTML =
"<iframe width='100%' height='100%' src='https://en.wikipedia.org/wiki/" + userImput_stringVariable + "'></iframe>";
}
}
</script>
Just add
<body onload="selectPage()">
somewhere in the body so the function runs when the page does.
It'll open a prompt, the user then has to enter the address.
Also you'll need this in the body too:
<p id="getPage"></p>
It creates a paragraph with the contents of the iframe within the fuction.

SoundCloud API - Any way of extracting the genre of a track loaded in to widget?

This code takes input of a SoundCloud track URL and loads it in to the widget. Is there anyway of being able to extract and display the genre/tags of this song using the SoundCloud API?
<html>
<head>
<script type='text/javascript' src='https://w.soundcloud.com/player/api.js'></script>
</head>
<body>
<div id="sectionLoad">
<input type="text" id="url" value=""><br>
<div id="gap"></div>
<a id="loadButton" onclick="loadSong();" class="button">LOAD TRACK</a>
<div id="gap2"></div>
<iframe id = "sc-widget" width="80%" height="80%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=single_active=false" ></iframe>
</div>
<script>
function loadSong(){
(function() {
var iframe = document.querySelector('#sc-widget');
var widget = SC.Widget(iframe);
var input = document.getElementById("url");
widget.load(input.value);
console.log(widget);
}());
}
</script>
</body>
</html>
the Soundcloud widget has a getter method, getCurrentSound(), that'll return that information for you!
Notice you'll want to call getCurrentSound() only when the widget is done loading a song, otherwise it'll return null. SC already provides a ready event, SC.Widget.Events.READY, that you can bind that to, so after widget.load(input.value); add this bit:
widget.bind(SC.Widget.Events.READY, function(){
widget.getCurrentSound(function(currentSound) {
console.log(currentSound);
var genre = currentSound.genre;
var tags = currentSound.tag_list;
// add genre and tags to appropriate elements
});
});
I made a jsfiddle here where I broke the getCurrentSound call out into a separate function called showSongInfo: https://jsfiddle.net/dfnny3rp/

Easier way to show link from dropdown using Jquery

This is my first attempt at JQuery, I am building a world clock using an embedded iframe from http://www.timeanddate.com - the concept is the user selects the city from the dropdown and it will show the correct time for that city
<div>
<select>
<option value="n136" selected>London</option>
<option value="n240">Sydney</option>
<option value="n179">New York City</option>
</select>
</div>
<div class ="n136 time"><iframe src="https://freesecure.timeanddate.com/clock/i50ppgou/n136/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1" frameborder="0" width="80" height="38" allowTransparency="true"></iframe></div>
<div class ="n240 time"><iframe src="https://freesecure.timeanddate.com/clock/i50ppgou/n240/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1" frameborder="0" width="80" height="38" allowTransparency="true"></iframe></div>
<div class ="n179 time"><iframe src="https://freesecure.timeanddate.com/clock/i50ppgou/n179/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1" frameborder="0" width="80" height="38" allowTransparency="true"></iframe></div>
JQuery
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
if ($(this).attr("value") == "n136") {
$(".time").not(".n136").hide();
$(".n136").show();
} else if ($(this).attr("value") == "n240") {
$(".time").not(".n240").hide();
$(".n240").show();
} else if ($(this).attr("value") == "n179") {
$(".time").not(".n179").hide();
$(".n179").show();
} else {
$(".time").hide();
}
});
}).change();
});
It works.
FIDDLE
The problem is I have 10 more world times to add in, this will become a really large script and will load 13 world times, hiding 12, this seems really bad practice, I think it could be vastly improved if only one IFrame is loaded, then when the user selects a city from the dropdown the value change part of the URL of the Iframe (as if the n*** number is a variable) to the div class as each of them are the correct codes for each city. That would be much more efficent.
However I seem to have hit my limit with JQuery, if anyone could help out or even get me started it would be greatly appreciated.
Use the keyword this in your selector and change the src of one iframe:
HTML:
<div>
<select>
<option value="n136" selected>London</option>
<option value="n240">Sydney</option>
<option value="n179">New York City</option>
</select>
</div>
<div class="n136 time">
<iframe src="https://freesecure.timeanddate.com/clock/i50ppgou/n136/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1" id="timeDisplay" frameborder="0" width="80" height="38" allowTransparency="true"></iframe>
</div>
JS:
$(document).ready(function() {
$("select").change(function() {
$("#timeDisplay")[0].src = "https://freesecure.timeanddate.com/clock/i50ppgou/" + $(this).attr("value") + "/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1";
}).change();
});
Fiddle: http://jsfiddle.net/p8ARq/610/
Try this. The whole idea is to change the src attribute of the iframe tag based on appending the selected value from the dropdown.
$(document).ready(function() {
$("select").change(function() {
var value = $(this).val();
$('iframe').attr("src","https://freesecure.timeanddate.com/clock/i50ppgou/" + value + "/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1")
});
});
Working example : http://jsfiddle.net/DinoMyte/p8ARq/612/
Do something like this
==HTML==
<div>
<select>
<option value="n136" selected>London</option>
<option value="n240" >Sydney</option>
<option value="n179">New York City</option>
</select>
</div>
<iframe id="AllTime" src="" frameborder="0" width="80" height="38" allowTransparency="true"></iframe>
==JS==
<script>
var f=$("iframe#AllTime"),s=$("select"), k=s.find("option:selected").val();
//When Zone Change Do this
s.change(function() {
var n=$(this).val();
f.attr("src","https://freesecure.timeanddate.com/clock/i50ppgou/"+n+"/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1");
});
//At first Do this
f.attr("src","https://freesecure.timeanddate.com/clock/i50ppgou/"+k+"/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1");
</script>
==Another JS Approach==
<script>
var f=$("iframe#AllTime"),s=$("select"), k=s.find("option:selected").val();
//When Zone Change Do this
function ChangeTimeZone(t){
f.attr("src","https://freesecure.timeanddate.com/clock/i50ppgou/"+t+"/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1");
}
//User change time zone
s.change(function() {
var n=$(this).val();
ChangeTimeZone(n);
});
//At first Do this
ChangeTimeZone(k);
</script>

Load src of iframe using drop down menu and then change

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);
});
});

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