On my page (index.htm) i have a iframe inside a modal that loads a content i.e (pagex.htm) from a different domain (not owned by me).
This iframe with (pagex.htm) has a element with id (#close) that also have a onclick() event as below:
<a id="close-lite" class="ch-close" onclick="closeRender();" href="#">×</a>
In my index.htm i have my jquery/javascript and what im trying to do is to access the iframe and get the click event to close the modal that is inside my page (so im not trying to modify the iframe content). I have tried to use .content() but without sucess yet.
Perhaps is a cross domain policy ussue? how can i get around this?
How can i do this with javascript/jquery ?
The same-origin-policy prevents you from listening to what is going on in the Iframe.
Can be used postMessage().
http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/
But it works not in all browsers and needs init from both sides.
Related
Currently I've got a website with an iframe loaded from another site into my website. The loaded iframed site requires a button, which has an id called 'accept', to be clicked. (cookies)
Of course the user should not click this button twice, so I want to click this button automatically once MY page is loaded.
Problem:
The loaded iframe from the other site has no ID neither NAME tag.
How can I click this button on page load?
Code which I've tried, but does not work:
<script type="text/javascript">
$(document).ready(function(){
$("#accept").click();
});
</script>
I've readed on the internet it's possible to listen to an iframe without an ID. But I have no clue on how to write this into code.
I've been searching google the whole day. I can't get a solution.
Hopefully someone can help me on my encountered problem. A fixed code with explaination/documentation would do it for me.
Best regards.
You can listen to the load event of an iframe. I suppose there is only one iframe in your HTML page, so the following can work without any issue:
$(function() {
$('iframe').load(function() {
$('iframe').contents().find('#accept').click();
});
});
Note that you need to access the contents of the iframe using contents() method.
It's not really a solution, but it's an answer on my question:
SecurityError: Blocked a frame with origin from accessing a cross-origin frame
You can't access an with Javascript, it would be a huge
security flaw if you could do it. For the same-origin policy browsers
block scripts trying to access a frame with a different origin.
I'm trying to set up event, which should fire when iframe is loaded. It is important to acknowledge, that I want this event to fire INSIDE iframe, not in parent page. Actually, parent doesn't have to know that iframe was loaded.
On the beggining I've tried $(function() {....} (document.ready) event, but it doesn't seem to work as expected. It seems that it fires when parent page was loaded (the same event on parent page works as expexted).
Then, I've tried window.onLoad = function() {...} but it doesn't seem to work at all (event not fired).
So, how to do that? Again, I'd like the page inside iframe to know that loading was complete. Basically, I'd like to have event, that will work in iframe page as $(function() {}) in parent page.
I am afraid you can't do this in a right way.
See this link : How to add onload event to a div element?
May be somebody should post the ticket to github.
If you own the page being loaded into the iframe, put the code in the page being shown in the iframe, not the parent page. If you do not own the page being loaded into the iframe, you cannot do what you're attempting due to cross-domain security sandbox restrictions. You would need a CORs solution http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
In my app, I need to open an iFrame, whose content comes from the same domain and uses the same protocol, and port number.
For the content in the iFrame, I want to have mouse click events, and I need to catch these events by using JQuery's $('#my-item").click(function(){ ..... }). The javscript code is in a file loaded TOGETHER with the iFrame content.
However, the mouse click event is not caught by my javascript code. I am kind of confused. I really want to KNOW and LEARN about how to do Javascript within content in an iFrame. I am not talking about javascript code loaded with the iFrame's parent.
Thanks for any input and pointers.
Regards.
Hey guys i have a little problem.
I have a page something like this:
<div id="the_box"><iframe src="somesite"></iframe></div>
I have the div on my page but inside the iframe theres a form from another site where i would like to know when the user clicked a button inside that frame, is there a easy way to register that a user clicked?
This is not possible due to browser security restrictions. Events are not allowed to propagate over iframe elements whose src attribute is an external domain.
No this cannot be done . Maximum you can know is when the user clicks anywhere on the iFrame. Not on any elements inside the IFrame , as that violates the browser rules and Internet protocols .
I am developing a webpage which our customers want to insert on their websites by wrapping my page in an iframe (cross domain). I don't need to interact with the parent or know anything about whats outside the iframe.
I am using HTML, CSS, Javascript and Webservices.
Question: How am I limited inside an iframe compared to if my page was running outside the iframe?
You're not. Any JS linked within the iframe from your domain will act in the context of the iframe. Aside from being crammed into an unusual container it should work the same as it would if it was loaded independently.
If your needs should change however, there are ways to send signals between parent frame and iframe if both pages have JS written to cooperate. There's methods using the # in URLs which can be read by the parent and don't force page reloads and I believe they share the window.resize event which can be fired manually without actually resizing the window.
UPDATE: There are far better ways to communicate between cross-domain iframes now than there used to be. Naturally you'll still require cooperating JS on both ends but you can use window.postMessage rather than triggering messages via window.resize and data after a hash symbol in the URL. That was a cool trick though.
When creating links you should have in mind to maybe use the target-attribute of the a-tag if you want to create a link for the parent window. Otherwise the new page would be loaded into the iframe.