$("#div").append('<iframe width="200" height="100" src="https://www.youtube.com/embed/zoMYU_nOGNg?rel=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>');
By using this example append cause page reload, maybe are some issue to load youtube iframe without reloading page
Demo: https://jsfiddle.net/0uqtn0u5/
My observation is wrong it's not realod the page.
Some browsers will treat <button> as a submit button and submit to the same page regardless of the button being a child of a form or not.
Change to
$('button').on('click', function(e){
e.preventDefault();
$("#youtube").append('<iframe width="200" height="100" src="https://www.youtube.com/embed/zoMYU_nOGNg?rel=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>');
});
or add type="button" to it.
If you DO have a form, instead do make the button a submit button and prevent the default action on the form submit:
$('form').on('submit', function(e){
e.preventDefault();
$("#youtube").append('<iframe width="200" height="100" src="https://www.youtube.com/embed/zoMYU_nOGNg?rel=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>');
});
There is no other reason for the page to reload. Your code should not and indeed does not reload anything in Chrome
Take a look: How to prevent an iframe from reloading when moving it in the DOM
"If you're trying to move it visually, you can try modifying the CSS to use absolute positioning or some other adjustments.
However, if you're trying to actually pull it out of the DOM and insert it somewhere else, you won't be able to avoid a reload."
~ John Fisher
Also:
https://stackoverflow.com/a/8318401/5444802
"It isn't possible to move an iframe from one place in the dom to another without it reloading."
~ Kevin B
Check the youtube api for iframe embedding
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
Related
I want to display a loading.gif when my iframe gets loaded.
I did that with the code I found here: Show a loading gif while iframe page content loads
This works. But on my website, I have checkboxes and radio buttons. When the user clicks on one of them, the iframe changes it's source and gets refreshed. The problem is, that the loading symbol is only visible when the whole page loads, not when the iframe changes it's source and get's refreshed. How can I fix that?
<style>
#loadImg{position:absolute;z-index:999;}
#loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text-align:center;vertical-align:middle;}
</style>
<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>
code from Jay, view full answer here
I haven't tested this but as far as i know, the jQuery on("load") event triggers whenever an iframe is reloaded. So instead of using onload as an attribute, use this:
$("#frameId").on("load", function () {
console.log("reloaded"); // Here you can display the loading.gif file
})
On my WordPress website, I have a menu down one side and a embedded prezzie within an IFrame next to the menu.
I want to use some form of click event to change the content of the IFrame to another prezie without the page being refreshed, to give it a seamless change but I am stuck on how to write the code.
The menu buttons are actually pictures trapped in a map, to give the illusion they are actually functional buttons.
Can anyone help me with this please?
Thanks in advance.
Add a JavaScript function to swap the Url of the Prezi iframe.
function changePrezi (preziKey) {
var url = "http://prezi.com/embed/" + preziKey + "/";
document.getElementById('prezi').src = url;
}
Then add onClick handlers to your menu links/buttons to call the changePrezi function, passing in the proper Prezi key.
<button onClick="changePrezi('ltv92t40up8k')">Prezi 1</button>
<button onClick="changePrezi('rqqnh_taqx1l')">Prezi 2</button>
<iframe id="prezi" frameborder="0" width="550" height="400"></iframe>
Here is a Plunker Demo.
I have 4 images that when I click them they show information under the images and when I click the last ones the images go under the page and whens the new page loads with that information I have to go down with scroller to see the image and information of the last image.
I want to put focus to the last image when the new page loading.
I do this but it's not working:
<script>
function setFocusToTextBox(){
document.getElementById("abc").focus();
}
</script>
<img src="images/Practidose.fw.png" alt="" width="770" height="150" id="abc" onclick="setFocusToTextBox()"/>
Picture of the 4 images and when I click the last one I want to focus that image when the new page loads:
.focus() can normally only be applied to links or form inputs.
However, you can use it on arbitrary elements by giving the element a tabindex attribute.
This is usually a good idea for accessibility reasons anyway if you want to make use of onClick handlers, as this will help keyboard navigation and other accessibility tools understand that your element is supposed to be clickable.
I am not fully sure of why you want to focus the image you are ON, but try
function setFocusToTextBox(){
document.getElementById("abc").scrollIntoView();
}
If onload:
window.onload=function(){
document.getElementById("abc").scrollIntoView();
}
I'm creating a dynamic website. My problem is when i click on the following tag:
<a class="s-inte" href="set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1">Interesante</a>
The page gets refreshed, How do I avoid this page refresh?
What you want to accomplish is to update some counter of interestings w/o refreshing the page?
You should do it using AJAX techniques, this is what AJAX was invented for.
Consider the following code, it's top easy (jQuery library required):
Interesante
<script>
$(function(){
$("a.counter").click(function()
{
$.get("set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1" );
.... // you can do some animation here, like a "Liked!" popup or something
return false; // prevent default browser refresh on "#" link
});
});
</script>
you need to prevent default action on the click event.
You can do a simple inline handler which will return false
<a class="s-inte" onclick="return false" href="set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1">Interesante</a>
or write a jQuery handler which will do the same
$('.s-inte').click(function(e){
e.preventDefault()
})
If you are dynamically loading the content using ajax. You should probably call it in this way. This way it will work for every anchor with .s-inte class, no matter it's added dynamically or statically.
$(document).on('click', '.s-inte',function(e){
e.preventDefault();
// Do more stuff every anchor click here...
});
put href="javascript:void(0)"
First, here is my code:
<script type="text/javascript">
$('#Advertisement-1').click(function () {
alert("Ad Clicked!");
});
</script>
<div id="Advertisement-1">
<!-- PBBG Ads Zone Code Begin -->
<center>
<iframe src='http://www.pbbgads.com/ad.php?z=429&bg=000000' width='468' height='67' marginwidth='0' marginheight='0' hspace='0' vspace='0' frameborder='0' scrolling='no'></iframe>
</center>
<!-- PBBG Ads Zone Code End -->
</div>
Now, my issue is when I click the ad, it doesn't send an alert. It just opens the ad in a new window. Any ideas how I can get the click event to work?
click event doesn't works on iframes, because the event does not bubble up through the <iframe> tag's ancestors in the DOM.
Instead you can use the blur event to detect when your parent page is losing focus.
This jQuery plugin is designed to track clicks on iframes : https://github.com/finalclap/iframeTracker-jquery
It's very easy to use, simply select your iframe with a selector, and supply a callback function (will be fired when the iframe is clicked) :
jQuery(document).ready(function($){
$('.iframe_wrap iframe').iframeTracker({
blurCallback: function(){
// Do something when iframe is clicked (like firing an XHR request)
}
});
});
The code to alert is in the parent window and the ad I suppose is inside the iframe so it is not possible unless the parent page and iframe are in same domain.
You can't unless you're detecting the click from http://www.pbbgads.com/