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
Related
Clickjacking is when people trick users into clicking a button they're not supposed to, making them perform a malicious action.
I'm working on a product which, as an option for merchants, provides an iFrame component that can be embedded into a website to make a payment. Signed in users will see a button in the iframe that they can click to perform an important action. This action should only be called when the click is genuinely theirs.
i use this code to prevent clickjacking :
if (top == self || parent != top || document.location.hostname != document.domain) { top.location.replace("https:\/\/www.mysite.com\/?404");}
can someone break into my code ?
note: i don't want to use x-frame-option
thanks
From an Iframe you cannot really control clicks from the parent, if they click inside the Iframe but another event is watching it, you cannot really prevent it being from a different domain.
But all is not lost, the Iframe itself cannot stop it, but it can be wrapped with something like this. This is assuming jquery, might be best to translate to a native version for your application, in the interest of showing an example I will use jQuery.
<div id="i_wrap"><iframe src="SRC"></iframe></div>
<script>
$('#i_wrap').on('click',function(event){
event.stopPropagation();
});
</script>
Of course this is not a cure-all, there are still ways around this. You could also use a portion of the new HTML 5 cross document messaging read here on it to do some validation and possible warn the user on an unsafe site (if your iframe gets no message, then you show no button).
Though I have no experience in the cross document messaging methods, and I am sure they probably don't allow different domains (though there may be ways around that, to an extent).
Though this question is not totally clear and I may not be understanding it perfectly, if you update your question with more details I will update my answer to suit.
I want click by some element in VKontakte web application from JS, but it not possible.
For example I go to this application http://vk.com/app2797985. I want click by element with id: likeBlock_button_like.
Standart JS code for clicking by element:
javascript:document.getElementById('likeBlock_button_like').click();
but this code dont work with this application. How to solve this problem?
The reason you cannot access the element is because it is inside an iframe. Since the iframe is from different domain, you cannot access dom elements through javascript due to Same origin policy
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.
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.
I'm currently struggling with a good navigation on a website using Ajax calls and unobstrusive JS. I'm catching the click event on links, load the content, attach it to a div and then return false. This works quite well and also allows Google to crawl the site with speaky URLs.
But I didn't know how to deal with the browser back button. I found this solution to catch the event when the user clicks on the back button:
http://www.bajb.net/2010/02/browser-back-button-detection/
It works quite well. But I also want the back button to work normally when the user found the website via a link and wants to return to the previous page (I don't want to trap anyone).
When I thought about it the best way would be to use anchors. The normal back button supports them and you can go back in history without reloading the page (/#1 <- /#2 <- /#3 etc.)
It would work like this:
Use normal URLs in the link, but catch the click event
When user clicks, load content and attach it to a DIV
Change the window.location, using an anchor (e.g. 'domain.com/#products/women-clothing' with window.location="#products/women-clothing";)
When the window.location changes, get the anchor, read out the path and get the content via ajax, attach it to a DIV
Only the last part isn't really clear for me and I could need help here.
Finaly, my question: Does this make any sense?
Thanks!
Just add the href to window.location.hash after loading the content into a div. Then you can use that back button detection script to load what ever is in the hash.
I solved the problem by using this great jQuery Plugin: History.js
Thanks!