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>
Related
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
I want to give action to iframe with blur and focus,
The scenario of my code is,I written a android question in webpage,beside that question I displayed android phone picture,what ever the code written below the question,the output will be shown in that picture and if you are out of browsing area,the title will shown as inactive.
action should be infocus or outfocus.
for this command I am writing,
<div class="andr_app">
<iframe src=" <%= request.getContextPath()%>/images/mob_empty.png" width="400px" height="800px" id="iFrameUrl${questionId}" class="mobileDisplayIframe" frameborder="0" scrolling="no"></iframe>
</div>
Please help me in this.
The iFrame element doesn't have focus or blur events, so you need to use the window.
var iframe = document.getElementById('iframe');
var iframeWindow = iframe.contentWindow;
iframeWindow.onfocus = function(){
//focussed
}
iframeWindow.onblur = function(){
//blurred
}
Reference: answer
Finally I got my answer,but not in iframe.
I change iframe to object,
<object data="<%= request.getContextPath()%>/images/mob_empty.png" width="325px" height="560px" style= "padding-right: 85px"; id="iFrameUrl${questionId}" id="iFrameUrl${questionId}" class="mobileDisplayIframe" frameborder="0" scrolling="no">
</object>
This question already has answers here:
How to update/change HTML content with JavaScript and prevent the page from refreshing?
(4 answers)
Closed 8 years ago.
so I'm attempting to make a page where I click on a button and the HTML code of the div next to it changes. Essentially, I want to be able to click a link and my code inside the div changes.
Here are the two different HTML codes:
Number One: (id = contentPOP)
<div id="contentPOP">
<h3>Hit like a girl entry, "Little Black Dress" by One Direction</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/QW6naMc6TWk?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen> </iframe>
<br>
<h3>Remembering Steve Jobs</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/q7oyy0FjhAY?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen></iframe>
</div>
Number Two (id = "contentNEW")
<div id="contentNEW">
<h3>Slow Motion War!</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/Y2996S-8oEU?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen></iframe>
<br>
<h3>1 Year Aniversary of Teddy Bear Productions!</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/7Tim_K74ua8?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen></iframe>
</div>
Here is an example of all the code
NOTE: I have no idea how to do this, so a detailed explanation would be very helpful. Also, I want to be able to do this with only JS, no JQuery
First, uncomment the following so it exists on the page:
<!--THE BELOW CODE SHOULD REPLACE THE ABOVE CODE
<div id="contentNEW">
...
</div>
-->
And instead hide it with CSS:
#contentNEW { display: none; }
Then add the following to your newVids() function:
function newVids() {
// target the div you want to change
var div = document.getElementById('contentPOP');
// replace its innerHTML with the innerHTML of the hidden div
div.innerHTML = document.getElementById('contentNEW').innerHTML;
}
This is really a poor way to go about what you're trying to do. You shouldn't think about toggling the visibility of each div, instead of replacing one with the other.
Listen, this is done very easily. Wrap both chunks of code inside of their own divs and give them unique IDs so that you can target them in the jquery. The inittialy hidden one, will have a display:hidden class attached to it and then you can use toggle to switch . Easy!
HERE IS AN EXAMPLE!!!
Good luck!
HTML
<p>This is a paragraph.</p>
<p class="hidden">This is a second paragraph.</p>
<button>Toggle </button>
CSS
.hidden{
display:none;
}
JS
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
So basically I'm trying to make a button so when you press it, it alerts the url the iframe is on.
My HTML:
<iframe id="iframeid" scrolling="auto" width="100" height="100" src="http://www.google.com" >
</iframe>
<button onclick="myFunction()">Click me</button>
Then for my Javascript I have:
function myFunction() {
alert(document.getElementById('iframeid').contentWindow.location.href);
}
Though when I press it it's not working. When I replace the alert with something else like "Potato" then it will work. Though for some reason it can't get the url, or maybe the frame. Any help accepted!
When the frame is displaying a document on another origin (as in your example), there is no way to get the URL that is being displayed.
The URL might include personal data belonging to the user so your site is prevented from accessing it.
Always look at your JS console:
I have an iframe that looks like this:
<iframe src="http://www.google.com" height=1000 width="500" id="myiframe"></iframe>
I want to create a link so that when I click on it, the iframe on the page changes. How can I do that using jQuery? Is it related to jQuery attr?
You don't need jQuery for that. You don't even need JavaScript for that.
Give your iframe a name, and target your anchors to point to it:
Foo
Bar
Baz
<iframe name="myiframe"></iframe>
This degrades nicely for people who have JavaScript turned off.
on clicking in the link "click here" // it will take move the link to the iframe as specified....
Click Here
<iframe src="blank.html" frameborder="0" name="test" id="test" width=1200 height=800></iframe>