I want to find the co-ordinates of an iframe relative to the page in which it resides.
I am trying to call this iframe from some click event inside it.
The page contains multiple iframes.
Any help will be appreciated.
Check out http://api.jquery.com/position/ and http://api.jquery.com/offset/, one of these should get you the coordinates you are looking for. As for the click. The click even should bubble to the iframe element of the dom, so you can listen there. Something like this:
$('#myIframe').on('click',function(){
var coordinates = [$(this).offset().top, $(this).offset().left];
});
I think the lack of knowledge on iframes and how frames communicate caused the problem on my part. Well the only way I was able to solve this was to use window.postmessage to allow cross -origin communication.
https://developer.mozilla.org/en-US/docs/DOM/window.postMessage
Appreciate the help.
Related
Hey guys i really need your help. I am creating some kind of application for dynamically searching multiple items. For example, I want to search specific products in one store via iframe(for example, src will be 'www.store.com/search'), i create a array of all objects which i want to search and i create loop which will change iframe's src('www.store.com/search/item-1', 'www.store.com/search/item-2', etc.). I need to access price for selected item, preferably through iframes dom element. I was trying to access iframes dom element and console with no success (Blocked a frame with origin from accessing a cross-origin frame). I am pretty sure im not headed in the right direction, does anyone have better solution or a way to bypass this?
If you don't control the contents inside of the iframe there is no easy way to do this. The web browser has a security feature (called CORS - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) to prevent this sort of interaction for security reasons.
In order for this to be possible the page inside of the iframe needs to be your page, and you need to configure the CORS settings on it to allow being used with an iframe like this.
I'm creating a portfolio website for a filmmaker.
I would like to know how to go to another page and change the URL when just scroll the window like these websites(http://taotajima.jp/, http://maxxhat.com/). Are these pages in one html document or multiple documents?
I searched and tried to solve it by myself but couldn't find the answer since I'm a junior developer. I would like to know at least what I need to learn to actually do it.
Thank you in advance.
A new feature offers you a way to change the URL displayed in the browser* through javascript without reloading the page. It will also create a back-button event and you even have a state object you can interact with.
You can programmatically invoke the back-function by running:
window.history.back();
If you need to manipulate a state (instead of creating a new one) you can use:
window.history.replaceState(“object or string”, “Title”, “/another-new-url”);
Check the example here LINK
Full Example is Found Here
I am working on chat-bot which is intended to work with all domains. suppose i have a chat-bot side under 'chat.mybot.com'(iframe)(done on angular) and my website is 'example.com', here i cant listen to events of 'chat.mybot.com'(iframe) from 'example.com' because its on different domains.
Solution if it was on same domain
$('iframe#chat_bot').load(function(){
$(this).contents().find("body").on('click','#showthat',function(event){
alert("div with id 'showthat' clicked inside iframe");
});
});
Problem
How to i do it in case of cross domain situation?
I have researched a bit and took a look at other chat apps but still cant get a clear idea how to do it.
Any suggestions or thoughts are appreciated.
This might help you.
parent.$('body').trigger('eventName');
The event triggered inside the iframe will be detected in the parent document.
OR
$('#InnerIframe').contents().find('#SuperWebF1').trigger( "click" );
InnerIframe - ID of IFrame
SuperWebF1 - ID of the button
I'm creating a web app which uses facebook comments.
When the comments are loaded I need to re-size my container to fit the new size including the comments.
I'm looking for an event that's fired when comments are loaded but can't see any reference to anything anywhere. Is there an event, if so how can I access it?
Cheers
Tom
Take a look at FB.event.subscribe(). You may want to try subscribing to the xfbml.render event. You may also want to resize your container on the comment.create and comment.remove events as well
I have a an iframe which inside there is a video link from somwhere.
I want popup a div when click on iframe.
<a href="javascript:alert();" class="iframelink">
<iframe src="http://www.youtube.com/embed/zDNXx-PgU3k" width="213" height="195" frameborder="0"></iframe>
</a>
$('.iframelink').click(function(){
alert('iframe clicked. Open popup.');
})
How? But because is actually another page javascript cant catch click event.
Is there any way?
Since you have to attach the handler on a link inside an iframe, you should find it inside the iframe. Try this.
$('a.iframelink iframe').contents()//Will get iframe contents
.find('videoLinkSelector')//Pass the required selector
.click(function(){
//Write your code here
});
contents() reference: http://api.jquery.com/contents/
Note that you can only access iframe resources only if it is in the same domain as its parent page.
Apart from being rather naughty and placing an invisible element over the top of your IFRAME (click-jacking), I think you're out of luck as I don't think events within the IFRAME bubble up at all. Careful here - you're in dangerous territory. Thar be monsters.
P.S. one option would be to have the IFRAME point to a page on your site, that you could add an onclick event to - which would then fire a function/event on the parent element - however you're still going to be out of luck when it comes to firing on clicking the FLASH object I think.
You can try to leverage the YouTube API.
http://code.google.com/apis/youtube/js_api_reference.html#Adding_event_listener
Though it is limited you may be able to do what you need to.