Can't detect jQuery click on vimeo iframe - javascript

Simple Vimeo iframe click does not work:
$('iframe').click(function(){
alert('ok');
});
I've also tried:
$('body').click(..
$(document).on('click','iframe',..
But when user clicks video while hovering it, nothing works, it just plays the video.

if you include the query parameter api=1 in your embed code, you can access events, including those events triggered when the user clicks the video in the iframe (play,pause). You'll also probably want to include their froogaloop.js file to more easily access these events.
<iframe id="player1" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="400" height="225"></iframe>
http://developer.vimeo.com/player/js-api
http://jsfiddle.net/bdougherty/HfwWY/light
https://github.com/vimeo/player-api/tree/master/javascript

It is a third party domian in the iframe, you can not do it because of same origin policy.

Unfortunately, you cannot track clicks in cross-domain iframes due to same origin policy, as epascarello has previously said.
You could set up a "thumbnail" that the user clicks, which would pull up that popup and then subsequently replace the thumbnail with the actual video. Just embed the video you want, but keep it as a hidden div, then use .show() when you want it to start playing.
Source

try this:
$('iframe').contents()
.find('[src*="vimeo.com"]')
.click(
function(){
alert('foo');
}
);

I found that before I could get anything inside the iframe to be found I needed to determine if the iframe was loaded. Then if the iframe gets loaded after page load or reloaded later in the process, your click function works.
jQuery('#iframe').load(function() {
jQuery('#iframe').contents().find('#play-button').click(function () {
// do your stuff
});
}
** this may or may not work cross-domain, but determining if the iframe loaded can be used as a hackish method of determining if something has happened in the iframe. If you created a "play" button on your domain on top of the iframe it could be used to load the iframe via a click function after page load and then your load function could contain your slideshow pause.

Related

Using IFrame and Javascript to scroll parent page

I'm looking for some help on what should be a basic script (I think), but I can't quite figure it out myself..
I have a page, with an iFrame, displaying a page that I only have access to the header.
I'd like to make it so that when someone clicks ANY link ( tag) in the iFrame window, it scrolls my parent page to the top (or a specific location).
Is this possible?
Edit: Also, if it's important, I'm already using David Bradshaw's iFrame resizer script to resize the frame on the fly, which uses postmessage to communicate frame->page. https://github.com/davidjbradshaw/iframe-resizer
Edit2: The parent window and iframe window are cross-domain
See Trigger events in iframe's parent window
Add some JS to your iframe page:
$(document).ready(function(){
$('a').click(function(){
window.parent.$(window.parent.document).trigger('scroll');
});
});
Then on the parent page:
$(document).bind('complete', function(){
//Add scroll code.
});
You could use post message to do something similar, but if you control both pages and they are on the same domain, this should work. If they are on different domains (which you didn't specify) you are stuck using postMessage which I believe isn't entirely cross-browser complient and therefore won't work on all settings and there really isn't a fallback.
If you want to use postMessage and you are using a plugin, just do something like
window.addEventListener("message",function(event){
if(event.origin == 'http://yourdomain.com'){
if(event.data == 'messageString'){
//Add scroll code
}
}
});

When iframe is clicked it loads the page it is displaying

I am trying to make it so when you click on an iframe it loads the page it is displaying. I have tried putting it inside a <iframe src="something.com"></iframe> tag but that does not work. I want an effect much like zoomer were when your mouse clicks on the iframe it sends you to the source page. This effect would require the iframe to not allow selection of its text. I tried putting a layer above the iframe of the same size and having that link but this does not work because of what this iframe will be doing.
EDIT:
The iframe is on the same domain
Ok third try: The magic of javascript
jQuery has a method, called .contents() , that when used on an iframe element returns the document of the iframe.
// Get a reference to the iframe document
var iframeDoc = $('#inviteFrame').contents().get(0);
Now you can bind a click event to it:
// Bind event to iframe document
$(iframeDoc).bind('click', function( event ) {
// User has clicked the Iframe !!
});
You could make the entire page inside the iFrame a link with target _top, but only if the url is page.(html/php)#iframe
Oh, I see. Why not just an image of the page that goes to the actual page, instead of an iframe?

Hidden iframe onload event

I've seen some similar issues on here regarding the iframe onload, but nothing is working for me.
I have a hidden iframe that I use only for users to download a PDF that is dynamically created on my server. When the user clicks a button, the PDF is created on my server by pointing to a controller/action along with a query string of parameters.
This works great. However, I show a spinner and disable the UI when they press this button (BlockAndSpin function). I want to turn the hide the spinner and re-enable the UI when the PDF has been downloaded.
My onload method is never hit when I debug in Chrome and Firefox. I also tried to add the onload attribute to the iframe itself, and that didn't work either. The file downloads, but the UI stays the same and the onload event doesn't fire.
js
function downloadPOS(id) {
var ifrm = document.getElementById(id)
BlockAndSpin(true);
ifrm.src = "/staticPOS/AddOrDownload" + GetPosQueryString();
ifrm.onload = function () {
BlockAndSpin(false);
}
}
html
<iframe id="dlFrame" onload="BlockAndSpin(false);" style="display: none"></iframe>
Apparently this can't be done. My response is a .pdf being downloaded by the user and not loading anything into the iframe itself, thusly it never fires the event. I'll have to revisit how this is done.
I ran into a similar issue attaching to messages on a hidden iframe. IE does not seem to like cross domain communication with "hidden" (display:none) iframes.
My workaround was to set the iframe to an absolute position with a left value of -9999px. Then it's effectively hidden and you can attach to it.

iframe events in other html

I'm using an Iframe to have an html file work on a homepage when someone clicks on a link. When I use the html file by itself as a webpage, things like multiple key depressions and such work and are accessible. But they aren't when I access the html via an iframe.
Is this even possible?
Edit
Oh, I have a function in my main.html file, which detects key depressions and plays video files based off of key presses (it's a psuedo video game). It uses eventlisteners and objects to detect positions of keys. But again, this doesn't work when I view it in an iframe from some other html page, index.html
First off, if your iframe and parent are on different domains, you're going to have some security issues that you may/may not be able to get around (read Cross-Domain Communication with IFrames).
As for how to access your iframe's events from the parent.
See:
Adding an event listener to an iframe
Add event to iframe body
Adding click event handler to iframe
Adding event handler to an iframe using JQuery
EDIT: Should mention that your question is a bit ambiguous, so I'm kind of shooting in the dark here with this answer.

How to trigger click-to-call with javascript (iphone)

I have a link in a mobile webpage that needs to track an advertiser clickTag and then activate click-to-call.
I've got the tracking working but I don't know how to trigger the tel:1800123456; with javascript. Any ideas? This is not a web app; it's a standard html page. I can use jQuery.
Update
Just calling window.open("tel:num"); after adding a tracking iframe on click was not reliable enough because sometimes the call dialog box would open before the iframe had finished loading.
window.open("tel:num"); also opens a new window then opens the call dialog box, which isn't a great user experience on iphone 3gs/4.
Do you have any control over the tracking iframe? If so, you could call a function which makes the window.location call once it's loaded. Something like
$(document).ready(function() { window.iframe_loaded(); });
in the iframe code (if it has jQuery), and a function in your main script called iframe_loaded which does the window.location call.
If you can't set the code within the iframe but can edit the iframe container code, then you could do this...
<iframe id="whatever" onload="iframe_loaded();" width="400" height="200"></iframe>
...so the onload calls iframe_loaded() which does window.location...
If you don't have control over the iframe or its content, then easy kludge would be to just wrap the window.location call in a timeout, i.e.
setTimeout('window.location="tel:18001234567";', 500);
The 500 at the end will delay it by half a second. (Increase it if your iframe is slow to load.) It's not as elegant, but might work fine and users probably won't notice a small delay!
Have you tried window.open(url); where the url is "tel:18001234567" ?
Seems like that should work, right?

Categories