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.
Related
We are trying to show some popular websites in custom page of ours. We added some buttons with relevant links, and when clicked on them it should redirect to that website, while being shown on the same page of ours.
Is there any work around about it?
Our approach was, to put a click event for each button, then append a iframe with it. However most of the websites can't be shown on a frame.
<button id = "google"></button>
<div id ="googledisplay"></div>
var google = document.getElementbyId("google");
$("#google").one("click", function(e) {
$("#googledisplay").append('<iframe src="http://www.google.com"></iframe>');
});
Seems like google can't be displayed in an iFrame. Any suggestion, guidance are welcomed.
Most websites will deny a request to have their site on an iframe as part of another site. When you try creating an <iframe> of the google site the browser will deny it because of their X-Frame-Options header. The error in the Chrome console will read:
Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
TLDR: Very few websites allow this behavior and it is simply not the right way to do something like this.
Edit: To answer the second part of your question, their is no practical workaround to this. If something like this is found in a browser, it will be treated as a bug and patched immediatly. It is simply a matter of security.
My project is to have preview of some websites inside my website, I'm using Iframe for now to load the website preview and then the user can interact within the Iframe.
I have to change the Iframe implementation to be within the page For SEO purpose, So what could be the replacement is Jquery .load() function.
$('div#websitePreview').load('Website_URL');
but the problem is when the user interact with the website (click some link) the whole page will redirect to the new link, so is there a way to load the page which been clicked by the user in the same div by ajax call without leaving my website?
UPDATE:
The websites I'm going to preview have subdomains of my original site
There is no way to achieve this, due cross domain security restrictions in modern browsers. You aren't allowed to access other domains content via ajax.
The other point is, that you may have css bugs if you load an entry page in a div on your site, because the loaded css will override your site's css.
Assuming the websites you are 'previewing' are on the same domain as your website, you can amend every a tag within the loaded div to perform an AJAX request with the following code:
var $container = $('#websitePreview')
$container.load('http://www.example.com'); // initial load
// link click within loaded content.
$container.on('click', 'a', function(e) {
e.preventDefault();
$container.load($(this).attr('href'));
});
On the other hand, if the previewed sites are on separate domains, you cannot load HTML from them due to the Same Origin Policy. An iframe or CORS request is your only option in those situations, and if the url is 3rd party, the latter is extremely unlikely to happen.
try
$('div#websitePreview a').live('click', function(event){
event.preventDefault();
var url = $(this).attr('href');
$('div#websitePreview').load(url);
}
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.
For example:
I have a main page with an iframe in it and my iframe contains a button. When I press the button inside the iframe some scripts are executed, and the design of iframe is changed. Texts appears and other stuff.
How do I detect when iframe scripts are run? (Or the button was pressed?)
The iframe is from a different domain.
If the contents of the iframe come from a different domain than the outside page, then you can't - the browser deliberately stops you from being able to tell much about what is going on inside the iframe. What you can do though is grab the URL the frame is pointing to if it changes.
If it's running in the same domain, you can just access the elements inside the iframe pretty much the same way as you would normally via the document property of the iframe
If the main page and the iframe are on the same domain, you can make the javascript in the iframe call a function or access the elements of the parent frame.
So at the end of the script in the iframe you can do
parent.script_is_finished();
If you have control over the script in the iframe, you could use window.postMessage to communicate with your main page, even if they are in different domains.
Support for this is limited to FF3+, IE8+, Chrome, Safari(5?), Opera10+
Here's a demo on html5demos.
As an update to the fact that the iframe is from a different domain:
Short answer: No. You can't detect clicks within an iframe from another domain.
Longer but still short answer: The reason you can't is the same reason you can change the contents of the iframe -- it'd be a security risk unless the iframe is on the same domain. You simply can't track user activity within an iframe sourced from a different domain.
Sorry, but I hope that helped!
Is it possible to tell if the source of an iFrame has redirected the client to another page? And if so, tell what page the client got redirected to?
onload event
like
<iframe src="http://www.mydomain/" onLoad="alert('fire');"></iframe>
The alert will pop-up whenever the location within the iframe has changed.
check it out here also
Here is a question explaining how to get current location of an iframe
The src attribute won't change if the iframe navigates to a new page, but the location of the iframe's contentWindow will.
If you start the iframe in a page on your own domain you can use the iframes onload event to read iframe.contentWindow.location.href.
Use a try-block, and if it fails because of a cross domain call, you can return that the iframe is now in some remote site.
If it returns a value you can return the url on your site the iframe has navigated to.
Allright, so I've been fiddeling with this script for a while now and I think I've reached a conclusion which I think is worth sharing. Cross-domain is pretty strict, and as far as I know there is no way of telling what url the xmlhttprequest object got passed on to. I did however notice a solution on another site where they suggest using a hidden iFrame (I'm referring to the link in #ayush's answer).