I have made the following site:
www.ppp.one
Whenever you open an image, a popup is loaded.
This popup can be closed using the X on the top-right. However, if you click on one of the thumbnails in the popup (reloading the frame) the X button can no longer close it.
The JavaScript I use:
function hide(){
if(currentIframe){
currentIframe.hide();
currentIframe = null;
}
popupBG.remove();
popup.remove();
}
And the html:
<a class="small align-top" onclick="frameWarp.hide();">✖</a>
Any ideas on what is causing the issue?
When you open the popup you call a function setUpAPI which inserts the frameWrap object into the global scope of the iframe.
When a thumbnail is clicked the frame is reloaded and the frameWrap instance is no longer available.
You could try listening for load events on the iframe instead of ready events:
iframe.ready(function(){
frameCacheDiv.append(iframe);
});
iframe.load(function(){
setUpAPI(iframe, settings);
settings.onShow();
});
It looks like when the iframe's URL changes the frameWarp variable becomes undefined. One idea to try would be to listen to the load event of the iframe and make your changes there: (you'd have to give it the ID of "iframeId")
$('#iframeId').load(function(){
console.log('URL changed');
// code to attach hide event here
});
Another idea would be to change your setup to use the postMessage API for the communication between the parent and iframe. You can read a tutorial of how to do that here:
http://robertnyman.com/html5/postMessage/postMessage.html
Edit: Actually, this blog post is a better example: http://davidwalsh.name/window-iframe
Related
I have a web page loading a iframe (inside a modal Fancybox) and this iframe contains a form with 2 pages.
I want this iframe content to ask the parent to trig a function (so the modal can be resized when the 2nd page of the form is shown)
$.fancybox.update();
When executed in the iframe, it doesn't work because it needs to be in parent context. So far, I managed to do it with binding a click on the "next page" button inside the iFrame.
$('body iframe').contents().find('.goToPage2').bind('click', function (e) {
$.fancybox.update();
});
This was working.
But now, I have to do it without waiting for a click (it has to happen after getting an ajax response). So I tried to bind a "show" action, and make a div appear with after(), but it didn't work.
$('body iframe').contents().find('#page2').bind('show', function (e) {
$.fancybox.update();
});
I also tried to reach the parent directly from the iframe but with no luck in my case (fancybox) :
$('#page2', window.parent.document).fancybox.update();
If anyone can explain how I can achieve this, I will be grateful :-)
We have a link on our page of which we want to track the usage. Currently, it's not really a link. It's a <div> tag with a data attribute containing the destination and a click handler bound to it.
When clicked, we send data to Google Analytics, and then trigger a page load with window.location = url after a short delay, so that we're sure that the data has gone through.
This approach works, but it has a major flaw: the clickable element is not actually a link, and behaves like one only in part. For example, I can't use my mouse wheel to click on it and have the link open in a separate tab (as you'd expect), or I can't right click on it and get a menu that is contextual to the link (because it's not a link).
Is there a way to use an <a> tag and get the behavior of a real link, intercept the click event, interact with Google Analytics and then follow the link normally after a small delay (to make sure the data goes through), without having to redirect ourselves and without having to lose functionality?
You can use event.preventDefault() to prevent the link from being followed:
$('a').click(function(e){
e.preventDefault();
var href = this.href;
setTimeout(function(){
window.location = href;
}, 2000)
});
With new HTML5 standards, couldn't you wrap your <div> in an <a> tag? Then you could do:
Inline:
<a href="yourawesomewebsite.com" id="gaEvent" target="_blank" onclick="_gaq.push(['_set', 'hitCallback', function(){window.location = this.href;}]); _gaq.push(['_trackEvent','category','action','label']);">
<div id ="blah"></div>
</a>
jQuery:
$('gaEvent').on('click', function(){
_gaq.push(['_set', 'hitCallback', function(){
window.location = url; // you'll still have to define this somewhere
}]);
_gaq.push(['_trackEvent','category','action','label']);
});
I totally referenced this SO post - Track event in google analytics upon clicking form submit
If I have a website loaded inside an iFrame, like this:
$("#myIframe").attr("src",url);
...is it possible to capture a URL of a new page when a user clicks a link withing that site?
You can attach to the onLoad Event
<iframe src="/test.html" onLoad="alert(this.contentWindow.location);"></iframe>
or
$('#myIframe').load(function() {
alert("the iframe has been loaded, pull the src");
});
Working Sample per Muthu Kumaran:
http://jsfiddle.net/muthkum/DuRTR/
You cannot access the content of an iframe from the page containing it since that would allow you to do alot of evil stuff like steal session cookies, make the user click stuff he didn't want to on another site, etc..
Glennulars answer will apparently work tho. :)
I don't know if events bubble up to the iframe, but you could try:
$("iframe").click(function(e){
console.log('something was clicked');
});
I'm working on modal windows. When I click on a hyperlink in the main page, I need to show a modal window. This modal window I prepared using divs and one iframe. iFrame is used to show the source. Now in this modal window, I have another hyperlink to click which again opens a new modal window. This goes on.
Every time when I click on hyperlink, i want to create a new modal window in that provided iframe's src file itself. How to achieve this ?
TIA.
You can achieve this by using a simple java script file which creates div and iframe in your pages and frames. This script file will have all the necessary methods and a class to access these methods separately in each of the frame.
For example you can have the script file like
MyClass = function(){
this.var1, this.var2; // To store values separately in each frame.
this.myMethod = function(){
// Function body
}
}
I have a page that has a number of iframes that load different pages on the same domain. Each iframe has normal pages which have links, forms, etc.. What I need to do is add a piece of JS to the parent page which would catch event for user navigating inside of any iframe. So if someone clicks something inside of one of iframes or submits a form or does anything like that, I want to catch that. I've tried different variations of this with no luck so far
$(document).ready(function() {
$("iframe").each(function(){
$(this).bind("unload", function(){
alert(1);
});
});
});
You could do:
$(document).ready(function() {
$("iframe").each(function(){
$(this).contains().find('body').on("click", "a", function(){
alert('1');
});
});
});
in this way from the parent page you attach an event handler that detects a click on every link inside the iframe and alerts 1. This should work only if the iframe is on the same domain of the main page, otherwise contains() does nothing.