I have written a page, served from the domain banana.example.com. I own that domain. The purpose of the page is for it to be embedded in pages from mango.example.com, which I don't own. (Same "big domain," but not exactly the same domain.) This works fine. I give the people at Mango the URL and they can embed my Banana page in an iframe on their site.
I would like for my page to display slightly different content depending on exactly which page on mango.example.com it is being embedded.
If I write:
console.log(window.parent.window.location);
I get the full URL printed to the console as a Location object, but I can't access any of that object's properties (e.g., href, pathname) or use either implied or explicit methods to stringify the location object.
Is there any way that I can get information about the page that my page is being embedded in? URL, title, anything? (For the purposes of this question, please assume that I only have authority over banana.example.com and can't ask the folks at mango.example.com to do anything.)
It is because of the browser's CORS (Cross Origin Resource Sharing). A solution for this problem would be to post a message to the outer page requesting for information, which, in turn would post a response to your iframe which will have a handler for that. Read about postMessage here. Note that in case you are not controlling the outer page you will not be able to solve the problem like this. You will need to convince the owner of Mango to receive your message where the iframe is requesting for information and to use postMessage to respond to it.
Related
I currently have a form that is being iFramed into an application that acts as a search bar. When users hit enter in this search, the form redirects the parent window to a different URL within the application. Note that these have the same domain, but different sub-domains. This part works well. See the code below.
window.parent.location = redirectUrl;
The issue is that I have a customer who is iFraming this application into another application. When they go to perform this search in this scenario, we are getting an error that says that "the frame attempting navigation is neither same-origin with the target, nor is it the target's parent or opener."
Is there a workaround around for getting this to work?
The browsers would typically disallow that if the domain is different.
You might be able to set response headers to tell the browser to allow the request to go through:
Access-Control-Allow-Origin: http://example.com
See below:
http://www.staticapps.org/articles/cross-domain-requests-with-cors
You're accessing the window object which, being on a different domain, is restricted by cross origin policy.
You could look at accessing the parent document directly, going up from the active frame, rather than going down from the top (window)
Credit for the image and decent reference
http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/
I open a new window to a Google docs presentation using the method window.open :
NewWindow = window.open("https://docs.google.com/presentation/d/1Qs9......");
I want to retrieve that url in order to know of it has changed (each slide of the presentation has a different url and i want to see if the user changed slides), using NewWindow.location.href
All i get is an undefined value. I can change href though
NewWindow.location.href ="http://www.google.com"; //works
I've read that if you are not in the same domain, you are not allowed to access the href or any other properties on the remote window.
Isn't there any other way to do it?
Thanks in advance.
There is a workaround but not in JavaScript.
The standard solution is to map the documents into your own domain using a proxy server that runs hidden under some URL of your own domain.
That way, you can access the documents via https://your.doma.in/google/presentation/...
A word of warning: If you make a mistake with configuring the proxy, crackers can abuse it to do nasty things (like trying to hack Google or send spam; the police will come knocking on your door).
I'm hosting few static web pages on GitHub (gh-pages). If the user tries to access a page which isn't available, he/she is moved to a custom 404.html.
What I'm wondering is if is it possible to access the original requested URL from the custom 404.html, using just JavaScript? There's no PHP nor any other server side technology available.
I've looked at the JavaScript's Location-object but that seems to give only the access to the current URL (in this case the 404.html) but not to the original requested URL. What I'm trying to achieve is a 404.html which gives suggestion like "Did you mean to access url ..." to the user but in order to do so, I need the access to the original URL.
your only hope would be document.referrer but of course GH would need to set it, which is highly unlikely for any page returning a HTTP 404 out of a request ...
You need to look at the url in document.referrer
Because the user is moved by the server to a 404 page, JavaScript cannot know abot the requested url.
It may be posible if you add in .htaccess to redirect the user to a page with the url: page.php?url=requested_url , then the requested_url appears in the address bar, which can be read by javascript.
I've tested this with a custom domain and location.href will actually give the current url, which in this case is the faulty one. So, while document.referrer will only give empty string, location.href will give the url you want.
I'm wondering if this has to do with what kind of GH pages you're hosting as well as if you're using a custom domain. My understand was, however, that it was only possible to serve a custom 404.html using a custom domain.
Note: The question is not how to fix the problem, as that is documented elsewhere on SO (e.g., Integrating Facebook to the leads to blank pages on some browsers / fb_xd_fragment).
1) What causes this, and under what conditions is it triggered?
2) More importantly, does this affect end users at all? For instance, how does this bug affect the URL shared by someone who clicks the FB Like button? If someone clicks the FB Like button from URL A, does URL A still get shared (but with "fb_xd_fragment" appended), or does URL A become your root URL (with "fb_xd_fragment")? In our logs, all the URLs appear as the root URL with "fb_xd_fragment" appended, so we're not sure if this is because people are clicking the Like button from the home page, or if all the shared URLs get morphed into the root URL.
Basically, what happens is whenever you use the JS API it opens your site in another iframe to use as a cross-domain receiver. What you can do is set a custom channel URL and it will use that instead. If seeing this bothers you, you can set a custom channel url. More information on http://developers.facebook.com/docs/reference/javascript/FB.init/
Is there a way to make an Ajax request to
s3-ap-southeast-1.s3.amazonaws.com (to S3 API)
from
s3.amazonaws.com
(from where a JavaScript app that is hosted at)?
You cannot do cross-domain ajax requests. That includes subdomains. However, it is possible to use JSONP.
yes, you can cross domain ajax calls, check cross-origin resource sharing:
http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing
Cross domain ajax requests are forbidden by protocol. And yes, subdomains too.
Read here: http://www.ajax-cross-domain.com/ It might help;
I know this is an old post, I provided a detailed example for cross domain ajax request using JSONP, hopefully it helps those who is in trouble:
http://www.shanison.com/2012/05/11/cross-domain-ajax-request/
shazmo said this in a earlier post:
Cross domain is entirely a different
subject. But cross sub-domain is
relatively easy.
More info here:
http://www.tomhoppe.com/index.php/2008/03/cross-sub-domain-javascript-ajax-iframe-etc/
Shameless plug, but this may help:
http://alexn.org/blog/2011/03/24/cross-domain-requests.html
I guess I found the link that #Patrick had posted and it had become broken
http://hoppeweb.blogspot.com/2008/03/cross-sub-domain-javascript-ajax-iframe.html
to avoid happening this again I will just try to re-post it)
The idea is setting up an iframe html on one domain and then calling that iframe from the page on the other subdomain. Both parent page and the iframe inside it should have the same document.domain.
document.domain = "example.com"
once done, those two pages act like they are on the same domain.
the rest, just copy-pasted ((
For example, for pulling in text, setup your page on
www.yourdomain.com and set document.domain to yourdomain.com. If you
are trying to pull in an html page using Ajax from img.yourdomain.com,
setup a page that, will become the iframe, to do the ajax pull. After
that pull is complete set the document.domain to yourdomain.com. In
your page on www. create an iframe which has the src set to your page
on img. Since document.domain is set, any functions on the parent page
are available to be called via the iframe. Lets say you want to put
your newly "ajaxed" html into a div on the parent page, you can do
that via "parent.getElementById('yourDivName').innerHTML =
Response.Text".
If you are pulling in XML, you can setup the page/iframe relationship
the same as above. That iframe will make the ajax call to the XML on
img.yourdomain.com and do something with it, lets say turn it into an
array. Once that is completed, set the document.domain on the iframe
page. At this point, the parent page can access that array on its
iframe via "iframeName.arrayName". Alternatively you can have an array
read on the parent page for this information and pass it to the parent
from the iframe via "parent.arrayName = iframeArray".
originally by #Tom Hoppe