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?
Related
i need help with this script, it works when you click on the empty space, but when i click the script inside the div, the jquery function dont work, i need to make it work when i click on the script on the div get the div close by the cookie.
code in jsfiddle
http://jsfiddle.net/FcFW2/406/
Your script tag creates an iframe. Clicks in an iframe won't bubble up to the iframe's parent. You'd have to write the code in the iframe src link.
See capture click on div surrounding an iframe for a related question (your script tag basically inserts an iframe at the location)
I have a problem with iframes. The problem is that I have a main page and menu which loads a content with iframe. On main page I have also a div "MessageBox" In one iframe I display content of variable in "MessageBox", so I have a full screen message on my MAIN page.
example in iframe I have button which generate this:
content="<input type='button' value='OK' class='Ok' id='Ok'/>";
MessageBox("Click OK", content, "child", "400", "170");
In iFrame I have jquery function:
$(".Ok",window.parent.document).live("click",function(){
alert("OK");
});
and everything if OK, only when I enter on this iframe at the first time. I see alert("OK") and its cool, but when I click other iframe from menu and again this iframe I see alert("OK") two times, when I click again other iframe and back to this Iframe I see 3 times alert("OK").
Can someone help me with this issue? Is there any iframe cache or something like that? I think that every time I open my iframe it is stored in memory and that why I have many calsses ".Ok" and when I click button "OK" the libe click method is executed as many times as I have stored iframes in memory?
Please help :)
The problem is, that every time you are adding another iframe from menu, you are registring new click handler to every element with '.Ok' class, so also for every iframe element you already loaded.
Edit: To register the click only for the .Ok element in the iframe use:
$('.Ok').live('click', function() {...});
without the scope to the parent window.
BTW: $('...').live(...) is deprecated. Use .on() to attach event handlers.
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.
I have one page(say jobs.html) with an iframe loads another page( say joblist.html).There is one another popup(which displays description of job when clicks one title) which is generated with javascript will be load into the page in iframe when it loads.
I have to load the popup(job description popup) outside the iframe.
Any solution to get the jobs.html page's document body using javascript?
or How can i get this popup outside the iframe?
Thanks,
You can use the parent function.
You can define the function of showing the popup on the parent page. not in iFrame and call that function from iFrame.
Lets suppose you have a function of showing job description in Parent page.
var showJobDesc = function(jobTitle,jobDesc,...){
....
}
now in iFrame call this function like;
parent.showJobDesc(jobTitlem, jobDesc, ...);
By doing this you have no issues for placement/alignment of the Dialog.
I have to load the popup(job description popup) outside the iframe
What do you mean when you say load the popup outside the iframe?
If you want to open the other page in a pop up, use window.open
If you want to open the new page replacing the parent's page, use the location of the window
window.parent.location.href = "newPage.html"
In general, you can refer to the parent window (the window containing the iframe), use window.parent (and therefore the parent window's document as window.parent.document, and any script in the parent window as window.parent.scriptName)
Put the show javascript into container page, and in the iframe just call parent.showpopup().
parent.showpopup() throws an access denied error. Kinda makes sense since including an iframe means the developer of the page can control the page it's contained in.
I have 2 <iframe> on my main HTML form.
These <iframe> are loaded from different external domains. Sometime external server goes offline and user see The page can't be dispayed message on my page.
Is there a way to hide these <iframe> when target server is not available?
You can use onload event to display iframe content. Make iframe invisible by default and set visible in onload event,
You could set up a listener for the load event and if this isn't called within a certain timespan then you hide the frame..