So I want to make a small website with a menu that has four HTML buttons. Instead of the buttons opening a completely new website I just want an iframe tag to change the URL it's displaying according to the buttons that are pressed.
Please keep it simple, I am a beginner in HTML, JS and CSS.
Thanks!
You just need to get the iframe element with Javascript and change the src attribute
The question has already been answered here : https://stackoverflow.com/a/6001043/7988438
var frame = document.getElementById("frame");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
btn1.addEventListener("click",link1)
btn2.addEventListener("click",link2)
btn3.addEventListener("click",link3)
function link1(){
frame.src="https://pixabay.com/photo-2845763/"
}
function link2(){
frame.src="https://pixabay.com/photo-3126513/"
}
function link3(){
frame.src="https://pixabay.com/photo-3114729/"
}
<button id="btn1" >link1</button>
<button id="btn2" >link2</button>
<button id="btn3" >link3</button>
<iframe id="frame" src="https://pixabay.com/photo-2845763/"></iframe>
EDITED to take comment into consideration
You can do this by having a function that changes the src attribute of the iframe.
<iframe src="http://cbc.ca/" id="theiframe" width="500" marginwidth="0" height="500" marginheight="0" align="middle" scrolling="auto"></iframe>
<button onclick="loadnewpage('http://bbc.com')">BBC Page</button>
<button onclick="loadnewpage('http://cbc.ca')">CBC Page</button>
<script>
function loadnewpage(newsrc){
var newloc = newsrc;
document.getElementById('theiframe').setAttribute('src', newloc);
}
</script>
Check out JS function paramaters and arguments to learn more about how this works
You can use the target attribute of an anchor tag, to tell the link to load in the iframe. I think that's the simplest way.
<iframe src="http://page1.html" id="frame1" name="frame1"></iframe>
click here for page 2
Related
<iframe class="class_name">
<html>
<head></head>
<body>
<div>
<!-- All of the stuff -->
</div>
</body>
</html>
</iframe>
How can I access to elements of this iframe?
.frame("class='classname'")
The above doesn't work.
Although two iframes have the same class, this will hide only the first iframe.
function hide() {
var iframe = document.getElementsByClassName("iframe");
iframe[0].style.display = "none";
}
<iframe class="iframe"></iframe>
<iframe class="iframe"></iframe>
<br>
<button onclick="hide()">Hide 1st Iframe</button>
What does this code does?
document.getElementsByClassName("iframe") gets all the elements with the class iframe and set the elements as the value of a variable named iframe. The number inside [] defines one element of the many. If the number inside [] is 0, the first element out of the group of elements is defined. After [], you can set the property you want.
Try with an id
<iframe id="your_id">
and use
.frame('your_id')
But here it will not work because of the security policy. Try it on your machine.
Read more about X-XSS-Protection.
var frame = document.querySelector(".myframe");
var content = frame.contentDocument;
console.log(content);
<iframe class="myframe" width="560" height="315" src="http://www.weather.gov/" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Assuming that you are using nightwatch - I see you're using .frame() and that is the Nightwatch method for selecting iframes - you cannot switch to an iframe by class, but you can use an index or by name if the element has a name attribute.
These posts should help:
Can't select an Iframe in selenium webdriver
Selecting nested iframe - selenium / javascript / node-js
How to get one iframe from group of iframe in div tags.
Here's the code:
<div id="mytesting">
<iframe src="http://google.com"></iframe>
<iframe src="http://facebook.com"></iframe>
<iframe src="http://mytalk.com"></iframe>
<iframe src="http://gmail.com"></iframe>
</div>
How to get one iframe from those for suppose I want <iframe src="http://facebook.com"></iframe> so how can I get from group of iframes using jQuery?
Do this:
var iframe = $('#mytesting iframe[src="http://facebook.com"]');
Or
var iframe = $('iframe[src="http://facebook.com"]', '#mytesting');
Or without jQuery:
var iframe = document.querySelector('#mytesting iframe[src="http://facebook.com"]');
You can do this:
var x = $("#mytesting").find("[src='http://facebook.com']")[0];
JS Fiddle
I am coding some kind of display made of an iframe. When I click a button, which is outside the iframe, it should right something down on the iframe. Is it possible?
<iframe src = "display.html" id = "ifr"></iframe>
<div class = "buttons" onClick = "showSequence()">
Get the whole sequence
</div>
The javascript code:
function showSequence(){
var iframe = document.getElementById("ifr");
(iframe.contentDocument || iframe.contentWindow.document).write("Something!");
}
Yes, if the iframe is in the same domain.
Here is a code example:
<button onclick="test()">Click to write in iframe</button>
<iframe id='ifr'></iframe>
<script>
function test(){
var iframe = document.getElementById("ifr");
//contentDocument because IE8 doesn't support contentWindow
(iframe.contentDocument || iframe.contentWindow.document).write("hello iframe");
}
</script>
First off this is the code
<div id="channelmiddle" class="middle-content alignleft">
<script type="text/javascript">
function changechannel(ch)
{
var url = "ch"+ch+".html";
document.getElementById("channelchange").src = "ch"+ch+".html";
}
</script>
<center>
<button class="button_static" onclick="changechannel(1)">Channel 1</button>
<button class="button_static" onclick="changechannel(2)">Channel 2</button>
<button class="button_static" onclick="changechannel(3)">Channel 3</button>
<button class="button_static" onclick="changechannel(4)">Channel 4</button>
<button class="button_static" onclick="changechannel(5)">Channel 5</button>
</center>
<iframe id="channelchange" src="ch1.html" onLoad="alert('123')" width="500" height="400" scrolling="no"></iframe>
</div>
On this page, whenever I click the button, it redirects to the homepage. I can't figure out why. Can someone help me? do you need more information about the code?
The modern browsers have security checks built in to prevent iframes from displaying web content when you change the src attribute. Chrome has a feature bypass the feature using &output=embed. See this article. From my tests, you can change the src attribute, but the content will not change. The best thing you can do is to load the iframe on the initial page load and not change the src attribute. There are a few solutions.
Make a redesign. Load the iframe with the content that needs to be displayed without the use of button clicks.
Send the user to another page. Set the iframe's src with the url that corresponds to the button on the initial page load.
If you absolutely have to, try making iframes for each url hide the iframe based on button clicks. This is not an ideal solution, but it accomplishes your goal.
This question already has answers here:
Change iframe src by clicking a link
(2 answers)
Closed 8 years ago.
following is the iframe code i want to know how can i change the src link when lets say i'll click on any button and it changes the link and shows result accordingly without page reload
Thanks,
<iframe name="reloader" id="reloader" width="500" height="400" src="http://www.google.com/"/>
$('#yourBtn').on('click', function(){
$('#reloader').attr('src', 'yourNewLink');
})
This is the perfect solution, if you can use links in place of button:
Basic jQuery question: How to change iframe src by clicking a link?
( in case you were overcomplicating )
<a href="http://www.somewebsite.com" target="reloader">
click here
</a>
<iframe name="reloader"
id="reloader" width="500"
height="400"
src="http://www.google.com/"/>
without jquery ( being seo friendly and degrades well )
<a href="http://www.somewebsite.com" class="mybutton" target="reloader">
click here
</a>
<iframe name="reloader"
id="reloader" width="500"
height="400"
src="http://www.google.com/"/>
<script type="text/javascript">
$(".mybutton").click(function(e) {
/* stop the link */
e.preventDefault();
/* get the url from the link */
var url = $(this).attr("href");
/* do something with it */
$("#reloader").attr("src",url);
});
</script>