I know this is a duplicate question however my requirements are slightly different,
In a previous question this was tackled by setting:
document.domain = "yourdomain.com";
on both pages.
However... I have a www.example.com domain and I have a mail.example.com
the mail.example.com is a subdomain I have no access to, it is automatically generated by my shared hosting and its where i access my emails. However I want an iframe with mail.example.com as the source on one of my pages.
e.g.
// www.example.com/mail.php
<html>
<head>...</head>
<body>
...
<? include("header.php"); ?>
...
<iframe src="mail.example.com"></iframe>
...
</body>
</html>
This works as expected but certain styles are applied to the iframe, so i want to use javascript to remove all the styles, then add my own.
But because i dont have access to mail.example.com, i cant set document.domain = "example.com"; in the sub domain.
Is there another way round this?
EDIT
I didn't make it very clear what I had already tried.
This is my exact iframe code in my mail.php page on the www.example.com domain:
<iframe id="mail" src="http://mail.a3mediauk.co.uk/mail2/source/index.php" height="800" width="960"></iframe>
This is the javascript code thats at the very top of the head element in the mail.php page:
document.domain = "http://mail.a3mediauk.co.uk";
And this is the jquery code im trying to use to remove the style:
$(function(){
$("iframe#mail").load(function(){
$("iframe#mail body").removeAttr("bgcolor");
});
});
if its any help, the document.domain throws this error in the chrome console:
Uncaught Error: SECURITY_ERR: DOM Exception 18
You probably forgot the http://
An iFrame is client-sided (HTML) so you have to enter the absolute path because it is a different domain. What you have written would redirect to http://yourdomain.com/mail.yourdomain.com.
As far as the same origin policy is concerned, the URLs have to match exactly. It doesn't matter if one is a subdomain of the other; the strings are different, so you're violating the policy.
I don't see a good solution. If the page was simple (no or only simple JavaScript, no links, etc), you can try to fetch the mail page with JavaScript into a String, strip the header (i.e. convert the body into a div) and then add that to your main page. But of course, this would break all links, the referrer, and cause lots of other problems like, say, what happens if a new version of the mail interface is installed?
Another solution would be to install a proxy service which makes everything from mail.domain.com available as your.domain.com/mail. If you run Apache on your domain, a simple rewrite rule using the "Proxy Throughput" feature should do the trick.
Related
I am new to Wordpress. I have just started the blog in which I can run my HTML / JS code properly. However, When I enter the affiliate code in my post, its not working.
Then I tried it on Local machine simply by just inserting that script but
It is also not working.
This is my code -
<div data-WRID="WRID-145208114021238062" data-widgetType="staticBanner" data-responsive="yes" data-class="affiliateAdsByFlipkart" height="250" width="300"></div>
<script async src="http://affiliate.flipkart.com/affiliate/widgets/FKAffiliateWidgets.js"></script>
I also tried by downloading this script to local machine and then simply giving the link to HTML but no luck.
I know this is something silly but I am not able to figure out. Please help.
It looks like #Jaromanda was on the right track.
I copy-pasted here in local file and in a local test Wordpress, and the script gets downloaded correctly. It shows an ad for flipkart, I suppose this is the expected behaviour.
To see what the script does, you can pass it through a beautifier to read it more easily.
The downloaded script creates an iframe element and sets the source of the iframe in order to display the ad. But to create the string representing this source, it uses, among other things, the window.location.protocol (see function createFKWidgetIframe). The location object represents the url of the document in which the script is run, not the location where the script comes from.
This window.location.protocol is usually http: or https:, but if you have it locally and not served through a local http server, then the adress bar in your browser will be something like file:///C:/path/to/the/file and the protocol window.location.protocol will be file:, and even if the iframe gets created, the source of the iframe will be set to something like file://affiliate.flipkart.com/widget/displayWidget?wrid=.... This location obviously does not exist. Please have a look at the source code of your page and see what the source of the iframe is set to, to confirm or not.
So if you do not serve the file through a local http server, there is no chance to load the iframe content.
If it also doesn't work on a Wordpress install which you access online, then I'm helpless. I could only advise you to check if you have ad blocker software/plugins or similar on your machine/browser, or if they get blocked by a firewall or a proxy you are behind.
Ok. This might have been asked several times but my problem is slightly different. I have following page tab in my facebook application:
Facebook Page Tab
This facebook page tab has my website embedded as iframe into it. What I want is that is to get the URL of current page inside my application.
For example, if you open above link you see facebook URL in your browser(obviously) address bar. In my iframe I just want to retrieve the URL of the parent page in which it is embedded.
I know same-origin policies in Javascript don't allow playing with cross-domain parent page's markup using javascript but I just want to retrieve the parent page URL, thats it.
Is that possible in ANY way?
Any way to access the address bar URL in my PHP application?
Thanks.
You probably don’t need the “actual URL”, but only the page id, I assume …? That you can get by decoding the signed_request parameter that gets POSTed to your app on initial load into the iframe.
How to “decode” it is described here, https://developers.facebook.com/docs/facebook-login/using-login-with-games#parsingsr
If you’re using the PHP SDK, that has a method already that does this for you.
You can use this to access it in JavaScript:
top.location.href
"top" is better than "parent". Because if your iframe is itself in another iframe then parent will return that iframe's location. "top" will return the highest location.
This will be a tough one, because CORS forbids to access the outside frame:
The referrer doesn't help very much either.
If you want to use the signed_request, and want to send custom data/parameters to your app, have a look at https://developers.facebook.com/docs/appsonfacebook/pagetabs#integrating
You can then fill the app_data parameter, and decode that in your app.
Try one of these:
parent.document.location
parent.window.document.location
parent.window.location
parent.document.location.href
I'm not sure if this will work on facebook though
Lets assume I have my browser load an Iframe with <iframe src="test.html">
Can I, using ajax, load the content of test.html into a div in the main html page?
This idea is my solution for that fact that I'm actually trying to overcome the limitation with making ajax submits to remote hosts. The plan is to generate the dynamic page with 0 sized iframe which makes report request to remote host. Then, after the page (& iframe content) loads I will copy the iframe content into a div using JS.
Tips are appreciated,
Thank you,
Maxim.
No, you can't.
When you load a page from a different domain into the iframe, it becomes unreachable. You can no longer access the contents of the iframe, as it comes from a different domain.
The only thing that I know of that you can reliably load from a different domain is a script, which JSONP uses.
Can I, using ajax, load the content of test.html into a div in the main html page?
Yes (since your example has a relative URI and is on the same host) …
This idea is my solution for that fact that I'm actually trying to overcome the limitation with making ajax submits to remote hosts.
… and no. You still can't read data from remote hosts.
I'm sure someone will correct me if I'm wrong, but I believe that scripting across domain boundaries is restricted. Have you tried it? Here's a function that may help out.
function insertDivFromFrame(divname, framename) {
var frame = document.getElementById(framename);
var d = frame.contentWindow || frame.contentDocument;
if (oDoc.document) {d = d.document;}
document.getElementById('yourdiv').innerHTML = d.body.innerHTML;
}
I'm not sure this code works... see http://xkr.us/articles/dom/iframe-document/ for more help on this.
... you may, however, design an AJAX request to local host and retrieve information from the remote server (as described here).
If you write a php/perl/etc. script to output the contents of a document from another domain, it'll give you access to the contents as the resulting page would be considered by javascript to belong to your domain. If you're not familiar with any server-side scripting languages, I'm sure you'd be able to find a script that'll do this for you by doing a simple google search.
Best of luck.
Previously, Google's Friend Connect required users to upload a couple of files to their websites to enable cross domain communication and Facebook Connect still requires you to upload a single file to enabled it.
Now, Friend Connect doesn't require any file upload... I was wondering how they were able to accomplish this.
Reference:
http://www.techcrunch.com/2009/10/02/easy-does-it-google-friend-connect-one-ups-facebook-connects-install-wizard/
There are multiple methods of communicating between documents on different domains, amongst these HTML5 postMessage, NIX, FIM(hash/fragment), frameElement and by using the window.name property.
These are available on different browsers and in different versions, but collectively they allow you to do reliable XDM (cross domain messaging).
One project that have done this earlier is Apache Shindig, which probably pioneered quite a few of these, and more recently, the project easyXDM has come, unifying all of these approaches with a common API, making it easy to create complex applications using XDM and RPC.
You can read in depth about the various methods of transporting the data in this article at Script Junkie.
Now, to answer your question directly, earlier on it was quite common to believe that there was only postMessage, the FIM (Fragment Identifier Messaging) available, and for the latter to work efficiently, one often had to upload a special file to your domain. As more methods have been discovered, this has by many been deprecated as a technique, and hence; no more need for the file.
Just for the record; I'm the author of both the Script Junkie article, and the easyXDM library (that is what Twitter, Disqus and quite a few more are using by the way).
<edit>It's difficult to remember/verify now, but I believe my answer here was probably incorrect. Sean Kinsey's answer above should be the definitive answer to this question. If you're reading this, please upvote his answer and ignore mine.</edit>
The Google Friend Connect widget works like most ads/gadgets do, using a copy/pasted snippet of HTML to reference a JavaScript include on the host's server which then creates an iframe containing the desired content. By opening the iframe with your site ID in the URL, Google's server is able to generate the appropriate HTML document to represent a Friend Connect gadget for your particular site/settings.
There isn't any cross-site communication happening beyond that initial step of creating an iframe with the appropriate URL target. Everything inside the gadget's dynamically generated iframe is more like the user visited a separate page on Google's server, but what would have been displayed is then embedded/isolated in a block on your page instead.
I'm not sure how it works in this particular instance but cross-domain messaging can be accomplished either by the postMessage() API or by changing the hash part of the URL and monitoring that.
The hash change method works because both the enclosing and the enclosed pages have access to the enclosed page's URL.
Of course, hopefully the postMessage() API call becomes more standard over time.
JSON allows cross-domain javascript.
Due to browser security restrictions,
most "Ajax" requests are subject to
the same origin policy; the request
can not successfully retrieve data
from a different domain, subdomain,
or protocol.
Script and JSONP
requests are not subject to the same
origin policy restrictions.
There is no other method than using the somewindow.postMessage(); for communication between cross-domain iframes.
Before somewindow.postMessage() you had to upload file in order to ensure that you can establish communication between iframes.
example:
<html>
<!-- this is main domain www.example.com -->
<head>
</head>
<body>
<iframe src="http://www.exampleotherdomain.com/">
<script>
function sendMsg(a) {
var f = document.createElement('iframe'),
k = document.getElementById('ifr');
f.setAttribute('src', 'http://www.example.com/xdreciver.html#myValueisSent');
k.appendChild(f);
k.removeChild(f);
}
</script>
<div id="ifr"></div>
</iframe>
</body>
</html>
now the http://www.example.com/xdreciver.html html content :
<html>
<!-- this is http://www.example.com/xdreciver.html -->
<head>
<script>
function getMsg() {
return window.location.hash;
}
</script>
</head>
<body onload="var msg = getMsg(); alert(msg);">
</body>
</html>
As for using the .postMessage(); its enough to use top.postMessage('my message to other domain document, which is also the main document', 'http://www.theotherdomain.com');
So I need to pull some JavaScript out of a remote page that has (worthless) HTML combined with (useful) JavaScript. The page, call it, http://remote.com/data.html, looks something like this (crazy I know):
<html>
<body>
<img src="/images/a.gif" />
<div>blah blah blah</div><br/><br/>
var data = { date: "2009-03-15", data: "Some Data Here" };
</body>
</html>
so, I need to load this data variable in my local page and use it.
I'd prefer to do so with completely client-side code. I figured, if I could get the HTML of this page into a local JavaScript variable, I could parse out the JavaScript code, run eval on it and be good to use the data. So I thought load the remote page in an iframe, but I can't seem to find the iframe in the DOM. Why not?:
<script>
alert(window.parent.frames.length);
alert(document.getElementById('my_frame'));
</script>
<iframe name="my_frame" id='my_frame' style='height:1px; width:1px;' frameBorder=0 src='http://remote.com/data.html'></iframe>
The first alert shows 0, the second null, which makes no sense. How can I get around this problem?
Have you tried switching the order - i.e. iframe first, script next? The script runs before the iframe is inserted into the DOM.
Also, this worked for me in a similar situation: give the iframe an onload handler:
<iframe src="http://example.com/blah" onload="do_some_stuff_with_the_iframe()"></iframe>
Last but not least, pay attention to the cross-site scripting issues - the iframe may be loaded, but your JS may not be allowed to access it.
One option is to use XMLHttpRequest to retrieve the page, although it is apparently only currently being implemented for cross-site requests.
I understand that you might want to make a tool that used the client's internet connection to retrieve the html page (for security or legal reasons), so it is a legitimate hope.
If you do end up needing to do it server-side, then perhaps a simple php page that takes a url as a query and returns a json chunk containing the script in a string. That way if you do find you need to filter out certain websites, you need only do this in one place.
The inevitable problem is that some of the users will be hostile, and they then have a license to abuse what is effectively a javascript proxy. As a result, the safest option may be to do all the processing on the server, and not allow certain javascript function calls (eval, http requests, etc).