I want to change this code from changing the sources of iframe randomly to be by order
<script type="text/javascript">
function newSite() {
var sites = ['Experiment1/index.html',
'Experiment2/index.html',
'Experiment3/index.html']
document.getElementById('myIframe').src = sites[Math.floor(Math.random() * sites.length)];
}
</script>
when clicking on this button and also this is the iframe
<iframe id="myIframe" src="Experiment1/index.html" allowfullscreen="true" scrolling="no"></iframe><br/>
<input type="button" value="Go to next level" onClick="newSite()" />
Try defining sites array outside of function, using .shift()
<script type="text/javascript">
var sites = ['Experiment1/index.html',
'Experiment2/index.html',
'Experiment3/index.html'];
function newSite() {
var curr = sites.shift();
sites[sites.length] = curr;
document.getElementById('myIframe').src = curr;
}
</script>
<iframe id="myIframe"
src="Experiment1/index.html"
allowfullscreen="true"
scrolling="no"></iframe><br/>
<input type="button" value="Go to next level" onClick="newSite()" />
plnkr http://plnkr.co/edit/cQZznvyltX46UO1Y0lDG?p=preview
Related
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.
How do I force any iframe content to appear on top if the content is changed as if the link had the target="_top" attribute...
EXAMPLE 1: Normally this code is what would be applied in a page.
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
if(top!=self){
top.location.replace(document.location);
alert("For security reasons, framing is not allowed; click OK to remove the frames.")
}
</script>
But I need to aply it to the iframe instead, and fire it only if the iframe is changed. How do I do that?
For example, I click on a link within the iframe, once that page changes URL then the iframe puts the page on target="_top" without having attributes for it in the iframe URL page, but the attributes for it should be from the iframe page itself.
EXAMPLE 2:
I have found a code that works as it should, the problem is only that it only fires when clicked on a button. Can I somehow make it to fire automatically when content of the iframe changes?
JavaScript:
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
document.getElementById('example-button').addEventListener('click', function (ev) {
ev.preventDefault();
var win = open('about:blank');
var iframe = document.getElementById('example-iframe');
setTimeout(function () {
var body = win.document.body;
body.style.padding = 0;
body.style.margin = 0;
body.appendChild(iframe);
iframe.style.position = 'fixed';
iframe.style.padding = 0;
iframe.style.margin = 0;
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 0;
}, 100);
win.addEventListener('beforeunload', function () {
document.getElementById('example-container').appendChild(iframe);
iframe.style.position = '';
iframe.style.padding = '';
iframe.style.margin = '';
iframe.style.width = '';
iframe.style.height = '';
iframe.style.border = '';
});
});
});
//]]>
</script>
HTML:
<button id="example-button">open in new window</button>
<div id="example-container">
<iframe id="example-iframe" src="https://example.com/">
</iframe>
</div>
After fiddling and putting together with loads of ideas given online by others I came up with a solution that is 70% correct.
Now the only thing that remains is how to make it react ONLY when the iframe URL changes and not when loading like now.
JavaScript:
<script language="JavaScript">
function GoToURL()
{
var URLis;
URLis = document.URLframe.u.value
{
var location= (URLis);
window.open(location, '_blank');
}
}
</script>
HTML:
<form name="URLframe" id="URLframe" method="post">
<iframe id="test" src="https://example.com" onload="GoToURL(this);"></iframe>
<input type="hidden" name="u" size="71" value="" placeholder=" URL " id="SeekBox" onkeypress="handleKeyPress(event)">
<script type="text/javascript">
(function() {
document.getElementById('SeekBox').value = document.getElementById('test').src;
})();
</script>
</form>
To test it easier I used these codes at the bottom instead:
<iframe id="test" src="https://www.4shared.com/privacy.jsp" onload="loadurl();" width="100%" height="528px"></iframe>
<input type="text" name="u" size="71" value="" placeholder=" URL " id="SeekBox">
<input type="button" id="SeekButton" onclick="GoToURL(this);" value=" go ">
<input type="button" id="SeekButton" onclick="loadurl();" value=" load url ">
<input type="button" id="SeekButton" onclick="alerturl();" value=" alert url ">
<script type="text/javascript">
function alerturl() {
alert($('iframe').attr('src'));
}
</script>
<script type="text/javascript">
function loadurl() {
document.getElementById('SeekBox').value = document.getElementById('test').src;
}
</script>
If I understand you correctly then you want to get the src of the iframe any time there is a change within the iframe and then open a window with that src. If I'm right then it doesn't seem like it's possible. I tried to get the source of the iframe using this little bit of code but to no avail.
<iframe id="test" src="justanotherwebsite.com" onLoad="iframeLoad()"></iframe>
<script>
var counter = 0;
function iframeLoad(){
if (counter > 0){
console.log($('#test').attr('src'));
}
counter ++;
}
</script>
Let me know if I'm way off the mark on this and I'll have another look.
I have an Object Element Which I Use To Load External Page On Click With a Button
My Html Is :
<input type="text" id="txt" />
<button onclick="getdata();return false;">Load page</button>
<div>
<object type="text/html" id="ExternalPageLoader" data="#">
</object>
</div>
And Script
<script>
function getdata() {
var url = $("#txt").val();
$("#ExternalPageLoader").attr("data", url);
}
</script>
How Can I Make Sure That Requested Page Has Been Fully Loaded Into Object Element
i Would Like To Check The External Page Not the Current Page
use with onload .
function getdata() {
var url = $("#txt").val();
$("#ExternalPageLoader").attr("data", url);
console.log('loading...')
}
function loading(){
console.log('loaded sucess')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt" />
<button onclick="getdata();return false;">Load page</button>
<div>
<object type="text/html" id="ExternalPageLoader" data="" onload="loading()">
</object>
</div>
Try to use .ready() event:
$("#ExternalPageLoader").ready(function() {
// Handler for .ready() called.
});
How do I make that when I click on a button / link instead of a page, that the button / link shows the source codes of a page in the iframe it targets? On an iframe who normally has a page on...
That is if to do that is even possible. But if it is then that would be great, because my page has a container iframe showing a web page and if by clicking a button / link that iframe could show the source codes of the page too, that would be perfect.
I tried:
<a class="button" href="view-source:Func/Math_Calculator_Func.html" target="IFrWin">Show the Source Code for the math function</a>
<iframe src="Func/Math_Calculator_Func.html" name="IFrWin" id="IFrWin" width="100%" height="748px" scrolling="auto" style="overflow:auto; overflow-y:hidden; overflow-x:auto;" valign="middle" align="center" border="0" frameborder="no" noresize></iframe>
I also tried:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function viewsource()
{
var oldHTML = document.getElementById('para').innerHTML;
var newHTML = "" + oldHTML + "";
var newHTML = newHTML.replace(/</g,"<");
var newHTML = newHTML.replace(/>/g,">");
var newHTML = newHTML.replace(/\t/g," ");
document.getElementById('IFrWin').innerHTML = newHTML;
var myIFrame = document.getElementById('IFrWin');
myIFrame.src=javascript:'"+newHTML+"'";
}
</script>
<input type="button" onclick="viewsource();" value=" View Source TEST "/>
<iframe src="Func/Math_Calculator_Func.html" name="IFrWin" id="IFrWin" width="100%" height="748px" scrolling="auto" style="overflow:auto; overflow-y:hidden; overflow-x:auto;" valign="middle" align="center" border="0" frameborder="no" noresize></iframe>
Both of them did not work.
If you are the owner of the source files, you can easily create a copy of the files, change their type to *.txt and simply change the source of your iframe to the given document.
This might work out with something along the way of this, you would just have to add the toggle mechanism.
document.getElementById('iframe').src = 'path/to/file.txt';
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" /> </script>
<script type="text/javascript">
function viewsource(){
$.get('Func/Math_Calculator_Func.html', function(data) {
var oldHTML = data;
var newHTML = "" + oldHTML + "";
var newHTML = newHTML.replace(/</g,"<");
var newHTML = newHTML.replace(/>/g,">");
var newHTML = newHTML.replace(/\t/g," ");
document.getElementById('iframe1').innerHTML = newHTML;
var myIFrame = document.getElementById('iframe1');
myIFrame.src="javascript:'"+newHTML+"'";
return1(); //call this function to show alert
});
}
</script>
</head>
<body>
<iframe src="" width="555" height="200" id="iframe1"></iframe>
<input type='button' onclick='viewsource()' value='View Source'/>
</body>
</html>
worked me..!! first check own then to integrate..set file path correctly..
any other doubt plz comment me...
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/