i am trying to open different iframe windows by assigning iframe src to a variable ,
when the page initially loads it should show only two buttons on the page , when i click on the button , an iframe should get loaded depending on which button is pressed , i tried doing something like this to create buttons and creating iframes , but it is not working
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<iframe scrolling="no" src="whatnext">
</iframe>
<script>
var b1 = document.getElementById('b1'), b2 = document.getElementById('b2');
var x = "Hello!";
function showX() {
var whatnext;
if b1.onclick==true
whatnext= "http://community.sitepoint.com/" style="border: 0px none; height: 1555px; margin-left: -116px; margin-top: -25px; width: 930px;"
elseif b2.onclick=true
whatnext= "http://community.sitepoint.com/" style="border: 0px none; height: 555px; margin-left: -116px; margin-top: -25px; width: 330px;"
}
</script>
and another piece of trial is
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<iframe scrolling="no" src="x" style="border: 0px none; height: 1555px; margin-left: -116px; margin-top: -25px; width: 930px;">
</iframe>
<script>
var b1 = document.getElementById('b1'), b2 = document.getElementById('b2');
var x ;
function showX() {
src="https:http://stackoverflow.com";
}
b1.onclick = function() {
x = "http://stackoverflow.com;
showX();
};
b2.onclick = function() {
x = "www.sitepoint.com";
showX();
};
</script>
You just need to change the src attribute of the iframe on click. I added the src to the buttons usind the data attribute.
Here is the example http://jsfiddle.net/8wLm42ns/2/
The HTML
<button class="loadiframe" id="b1" data-src="http://jquery.com/" data-width="500" data-height="400">Button 1</button>
<button class="loadiframe" id="b2" data-src="http://sitepoint.com" data-width="650" data-height="350">Button 2</button>
<iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">
jQuery
$('.loadiframe').on('click', function(){
var src = $(this).data('src'),
width = $(this).data('width'),
height = $(this).data('height');
$('#frame').css({
width: width,
height: height
}).attr('src', src);
});
For javascript solution try this http://jsfiddle.net/8wLm42ns/3/
The HTML
<div class="loadiframe">
<button id="b1" data-src="http://jquery.com/" data-width="500" data-height="400">Button 1</button>
<button id="b2" data-src="http://sitepoint.com" data-width="650" data-height="350">Button 2</button>
</div>
<iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">
javaScript - add in head section
function iframeChange() {
var buttons = document.querySelector(".loadiframe"),
iframe = document.getElementById('frame');
buttons.addEventListener("click", function (e) {
iframe.src = e.target.dataset.src;
iframe.width = e.target.dataset.width;
iframe.height = e.target.dataset.height;
});
}
window.onload = iframeChange;
Try this solution, at click on a button you load the webpage on a specific iframe, no jquery required.
JSBIN here
http://jsbin.com/gebelatomiya/1/
<!doctype html>
<html>
<head>
<script>
function loadFrame (elm){
var frame1 = document.getElementById('frame1');
frame1.src = elm.dataset.src;
}
</script>
</head>
<body>
<button id="b1" data-src="http://www.w3schools.com" onClick="loadFrame(this)">Button 1</button>
<button id="b2" data-src="http://www.sony.com" onClick="loadFrame(this)">Button 2</button>
<iframe id="frame1" scrolling="no"></iframe>
</body>
</html>
Related
So i am trying to have my iframe hidden on the page, until i click this button, but for some reason when the website loades the iframe is already there, i can hide it with the button, but im trying to have it hidden from the start.
var iframeShowing=false;
function show() {
var iframe1=document.getElementById("iframe");
iframe1.style.display=iframeShowing ? "block": "none";
iframeShowing=!iframeShowing;
}
<form> <button type="button" id="files" onclick="show()">Database</button> </form>
<iframe id="iframe" frameBorder='no' src="https://databank.worldbank.org/embed/Mine/id/f1b36ffc?ti=y&ds=n&dd=y&tb=y&sh=y&dw=y&pr=y&inf=y&zm=y&md=y&navigator=n&theme=darkGrey&bdrClr=rgb(68,68,68)&bdrStyle=solid&bdrWidth=0px&title=Arial;16px;true;false;rgb(68,68,68);justify&exptypes=Excel,CSV,TabbedTxt"
width="600" height="460"></iframe>
Javascript has nice function for that (classList.toggle). And i suggest to start loading the table if somebody clicked the button. If you have many tables on your side the page will be very slow. I have included it as an example.
function show() {
const f = document.getElementById('myiframe');
const link = 'https://databank.worldbank.org/embed/Mine/id/f1b36ffc?ti=y&ds=n&dd=y&tb=y&sh=y&dw=y&pr=y&inf=y&zm=y&md=y&navigator=n&theme=darkGrey&bdrClr=rgb(68,68,68)&bdrStyle=solid&bdrWidth=0px&title=Arial;16px;true;false;rgb(68,68,68);justify&exptypes=Excel,CSV,TabbedTxt';
document.getElementById('waiting').innerText = " - please wait";
f.classList.toggle('hide');
f.setAttribute('src', link);
}
.hide {
display: none;
}
<form>
<button type="button" id="files" onclick="show()">Database<span id="waiting"></span></button>
</form>
<iframe class="hide" id="myiframe" frameBorder='no' src="" width= "600" height="460" >...</iframe>
You can simple use classList, addEventListener, toggle methods in Vanilla JavaScript to manipulate the DOM, precisely .hide class in this case.
const btn = document.getElementById("files");
const iframe = document.querySelector("#iframe");
btn.addEventListener("click", () => {
iframe.classList.toggle("hide");
});
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hide {
display: none;
}
<form>
<button type="button" id="files">Database</button>
</form>
<iframe class="hide" id="iframe" frameborder="no" src="https://databank.worldbank.org/embed/Mine/id/f1b36ffc?ti=y&ds=n&dd=y&tb=y&sh=y&dw=y&pr=y&inf=y&zm=y&md=y&navigator=n&theme=darkGrey&bdrClr=rgb(68,68,68)&bdrStyle=solid&bdrWidth=0px&title=Arial;16px;true;false;rgb(68,68,68);justify&exptypes=Excel,CSV,TabbedTxt" width="600" height="460"></iframe>
I'd avoid the inline "onclick" tag inside iframe, and I'd wrap everything inside a domcontentloaded callback:
<script>
window.addEventListener('DOMContentLoaded', function() {
var iframeShowing = false;
var iframe1 = document.getElementById('iframe');
iframe1.style.display = "none"
iframe1.addEventListener("click", show);
function show() {
iframe1.style.display = iframeShowing ? 'block' : 'none';
iframeShowing = !iframeShowing;
}
});
</script>
I have a button that loads an 'iframe' and another one that closes, and I would like to merge the two functions into one button.
I do not know if this is possible.
I would like someone to help me.
<button class="hashtag" id="load">PLAY</button>
<button class="hashtag" onclick="parent.closeIFrame();">STOP</button>
<button class="hashtag" id="load">PLAY</button>
<!--<iframe id="myFrame" scrolling="no" src="https://www.rtp.pt/play/popup/antena3#player_prog" style="width:0;height:0;border:0; border:none;"></iframe>-->
<button class="hashtag" onclick="parent.closeIFrame();">STOP</button>
<script>
function closeIFrame() {
$('#myFrame').remove();
}
</script>
<div id="iframeHolder" style="opacity:0;width:0;height:0;"></div>
<script>
$(function() {
$('#load').click(function() {
$('#iframeHolder').html('<iframe id="myFrame" scrolling="no" style="border:0px;" src="https://example" style="width:0;height:0;border:0; border:none;"></iframe>');
});
});
</script>
Thanks in advance.
So I just made it into one button and changed the text to STOP once its clicked, also toggling a variable keeping track of whether or not the iFrame is loaded. If it is clicked when it says STOP is runs the close function and toggles it back to PLAY.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="hashtag" id="load">PLAY</button>
<div id="iframeHolder" style="opacity:0;width:0;height:0;"></div>
<script>
var loaded = false;
$(function(){
$('#load').click(function(){
if (!loaded) {
$('#load').text("STOP")
$('#iframeHolder').html('<iframe id="myFrame" scrolling="no" style="border:0px;" src="https://example" style="width:0;height:0;border:0; border:none;"></iframe>');
loaded = true;
} else {
$('#load').text("PLAY")
$('#myFrame').remove();
loaded = false;
}
});
});
</script>
Try this solution:
$(document).ready(function(){
$(".play").click(function(){
$(this).toggleClass("play close");
$(".hidden").toggleClass("show hidden");
if($(this).hasClass("close")){
$(this).html("CLOSE");
$("iframe").css({"display" : "block"})
}else{
$(this).html("PLAY");
$("iframe").css({"display" : "none"})
}
});
});
.play{
color: black;
}
.close{
color: red;
}
.hidden{
display: none;
}
.show{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="play">PLAY</button>
<iframe class="hidden"></iframe>
Tell me if it works for you
I am trying to create a button from Chimp.net that when you click on it opens an iframe with a pop up window, but I have an error in the code and I can not recognize it.
Can anybody see the problem?
This is the page where I am getting the code:
http://blog.chimp.net/chimp-custom-widget/
Code:
<script type="text/javascript" src="https://chimp.net/widget/js/loader.js?NzYyNSxtaW5pLHRlYWwsUGluayBTaGlydCBEYXkgMjAxNixHcm91cA%3D%3D" id="chimp-button-script" data-hide-button="true" data-script-id="oriol"> </script>
<h1>Button</h1>
<div id="custom-chimp-button" width="200px" height="200px" style="background: red; cursor: pointer; padding: 10px; margin: 10px;"><strong>Button</strong><br> You can click on this div! It'll open the form.</div>
<script type="text/javascript">
$(document).ready(function() {
$("#custom-chimp-button").on("click", function() {
var frame = document.getElementById("chimp-form-oriol");
var content = frame.contentWindow; content.postMessage("open-chimp-frame", "*");
frame.style.opacity = 1;
frame.style.display = "block";
});
});
</script>
You are missing the jquery.min.js reference on your page I guess. Please add it and see what you get.
Here on SO; iframe are not allowed so it won't show up in this code snippet.
$(document).ready(function() { $("#custom-chimp-button").on("click", function() { var frame = document.getElementById("chimp-form-oriol"); var content = frame.contentWindow; content.postMessage("open-chimp-frame", "*"); frame.style.opacity = 1; frame.style.display = "block"; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://chimp.net/widget/js/loader.js?NzYyNSxtaW5pLHRlYWwsUGluayBTaGlydCBEYXkgMjAxNixHcm91cA%3D%3D" id="chimp-button-script" data-hide-button="true" data-script-id="oriol"> </script>
<h1>Button</h1>
<div id="custom-chimp-button" width="200px" height="200px" style="background: red; cursor: pointer; padding: 10px; margin: 10px;"> <strong>Button</strong><br> You can click on this div! It'll open the form.</div>
I am trying to switch iframes in html which contains video references. Kindly help me with this. Actually i want to check the value i pass through textarea and then according to that value i want to switch frames.
HTML
<iframe id="i1" name="iframeswitch" src="nice-to-meet-you.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe id="i3" name="iframeswitch" src="your-name.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe id="i2" name="iframeswitch" src="deaf-you.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe id="i4" name="iframeswitch" src="you-work-where.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
i made these iframes display:none; in my css. and i want them to be displayed in a div named virtual.
javascript
<script>
function myFunction() {
var text=document.getElementById('me').value;
if(text="nice to meet you")
{
document.getElementById('i1').style.display="block";
}
else if(text="are you deaf")
{
document.getElementById('i2').style.display="block";
}
else if(text="what is your name")
{
document.getElementById('i3').style.display="block";
}
else if(text="where you work")
{
document.getElementById('i4').style.display="block";
}
else
{}
}
</script>
Your code is a great example why not to use inline CSS, imagine one day you find out your iframe should be width:600px; instead of 500 ...harsh time.
You don't need 4+ iframes, but only one.
<input id=me type=text>
<iframe id=myIframe scrolling=no frameborder=0>Get a Browser</iframe>
CSS:
#myIframe {
float : left;
position : relative;
height : 350px;
width : 500px;
margin-left : -25px;
}
Now, having only one iframe you can build an Object with your associations:
var text2src = {
"nice to..." : "nice.html",
"want some" : "want.html",
"good night" : "night.html"
};
and on input change you can than modify the iframe src:
var me = document.getElementById("me");
var ifr = document.getElementById("myIframe");
me.oninput = function(){
var val = this.value.toLowerCase();
if(text2src.hasOwnProperty(val)) ifr.src = text2src[val];
};
I have an iframe in a page and i want to get the current url for that iframe and update an input text with that url.
I found that i can get the url for the iframe using
document.getElementById("iframe_id").contentWindow.location.href
<iframe id="iframe" name="iframe" src="" width="100%" height="100%" style="border-width: 0px; border-color:#ffffff; border-style: solid;" scrolling="no" border="0" class="auto-style1" frameborder="0" marginheight="0" marginwidth="0"> </iframe>
<script type="text/javascript">
var link = document.getElementById("iframe").contentWindow.location.href ;
document.Show.link.value = link;
</script>
<strong>link for the iframe :</strong>
<input name="link" type="text" size="100" />
<a onclick="document.all.iframe.src=''" href="url" target="iframe">LINK</a>
that didnt work.
I dont know how to use it and update input text with that url every time the ifram's url changes
iframe url may change if some one clicks on link inside it
best regards,
Your iframe code is wrong. There it comes :
<iframe id="iframe" src="url_of_your_iframe" ... ></iframe>
<input type="text" id="input" />
<script type="text/javascript">
(function() {
document.getElementById('input').value = document.getElementById('iframe').src;
})();
</script>
That's it.
Edit : wait, your iframe's url changes when? how?
NOTE: You cannot access elements of an IFRAME (including contentWindow) if page within the IFRAME belongs to a different domain than the parent page due to Same Origin Policy (Quote from - Yuriy Galanter)
However here's a simple and basic browser that uses keyup to search; maybe it'll come in handy for you.
If you decide to add buttons to go forward and back in history you can use history.back();, and history.forward(); for that particular purpose.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type="text/css">
span.style {
cursor: pointer;
font-family: Sans-Serif;
font-size: 1.5em;
font-weight: bold;
padding: 0 .5em;
color: #666;
}
span.style:hover {
color: #999;
}
span.style:active {
color: #000;
}
input#goto {
width: 80%;
font-family: Sans-Serif;
font-size: 1.25em;
}
iframe#browsensearch {
width: 100%;
height: 90%;
}
</style>
<script type='text/javascript'>
$(document).ready(function() {
$("#goto").click(function() {
$(this).select();
});
$("#bing").click(function() {
var sitesgohere = document.getElementById("browsensearch");
sitesgohere.src = "http://www.bing.com/";
$("#goto").val("bing.com");
});
$("#goto").keyup(function(e) {
var val = $(this).val(),
sitesgohere = document.getElementById("browsensearch");
sitesgohere.src = "http://" + val;
});
});
</script>
<form name="sites" align="center">
<span id="bing" class="style">Bing</span>
<input id="goto" type="text" placeholder="http:// added by default" />
</form>
<iframe id="browsensearch" src="http://theextinctionprotocol.wordpress.com/2013/10/01/large-fireball-seen-acoss-six-midwestern-states/" width="100%" height="100%" allowtransparency="true" frameBorder="0">
Your browser does not support IFRAME's
</iframe>