I am trying to something I really can't figure out. I have an iFrame loading some content from another domain on which I have no power. What I am "simply" trying to do is fetch the content of the iFrame to use it in PHP/Javascript. This is where I faced the "cross-domain" problem. I am unable to access the content of the iFrame. So frustrating.
So I read, and read some more and seen about the "postMessage()" function provided by HTML5. I saw a solution with this system, but I still can't figure one point. Basically, it works with a sender and a listener. So I need to have a listener in the iframe that, when triggered, will send the content back to the main window.
But HOW do I add some code in the already loaded iFrame without deleting the content ?
I don't really need to use postMessage(), I can be anything as long as I can get this damn content !
Any suggestion is appreciated !
Thank you !
This is still not possible and for good reason!
To read from another domain using the client's cookies, IP and credentials requires the page being viewed to expose the information somehow - It's a 2-way conversation with the Listener (Outer page) and Sender (IFrame) working together.
A reason this is required: Imagine making an IFrame that takes up 100% of the page. You could show a common website's login form in the IFrame and yet intercept keystrokes/input box changes and log them. The user would only know the difference if they checked the URL.
If you have control over the browser of the user, you could use GreaseMonkey's cross-domain AJAX to get the contents of the IFrame (Assuming Firefox/Chrome)
Wont something like this help:
function getContentFromIframe(iFrameName)
{
var myIFrame = document.getElementById(iFrameName);
var content = myIFrame.contentWindow.document.body.innerHTML;
//Do whatever you need with the content
}
Related
I am building an application where I want to load a page from another server into my page. The particular page that I'm pulling data from depends on a query that is being run (with OAuth access) on that foreign server. Once I get the URL for that page, I am loading it in an iFrame and displaying it on my page.
The problem is, the URL that the query gives me is actually to a page that forwards three times before getting to where I actually want to go. To make things more complicated, it also has frame-buster code on the initial page. I set my page to redirect to a page that returns a 204 status on page unload so as to beat the frame-buster, but now it's just stuck displaying the initial blank page instead of the content I want, which is at the end of three redirects.
My initial idea was to try to capture the code for the outgoing location request on page unload. I had hoped to be able to see where the user is being redirected to and load that request inside the iFrame instead. Repeat three times to get the correct page in the iFrame. Intuitively, however, this felt like it shouldn't be able to work, and of course it does not because letting pages see where their users are going to upon leaving a site would be a major privacy issue.
Next, I was thinking that maybe I could just parse each new page in turn as it was loaded into the iFrame to find the script for the redirect. I'm pretty sure it's done on the server side, however, since looking at the code I was getting didn't turn anything up.
I started looking for ways to maintain that redirection inside the iFrame. That is, allow the redirect to occur, but force it to stay inside the iFrame while also preventing the frame-buster code from doing anything. This would be the easiest solution, but I can't find a good way to do it. Right now, I just have a blank page loading inside an iFrame, and I think there's something on the server side that performs the redirect that isn't running in the iFrame. The frame buster code only prevents the entire document from changing, not the iFrame. Is there a good way to do this or am I going about things the wrong way?
To prevent the frame buster, from here:
<script type="text/javascript">
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://server-which-responds-with-204.com'
}
}, 1)
</script>
load the first page via curl locally, strip the busting code, make all links absolute and display that in the iframe.
it should redirect as espected and do your merry thing.
Good luck making all the urls in the document absolute. Dont forget javascript urls and functions you might need to override by pasting in your owncode after the script tags.
I making a tool where a user has to quickly sort throo a heap of websites
to determine weather they are fit for a particular purpose.
I load the websides inside and iframe. All fine here but
some sites have javascript code that makes them pop out of frames.
Now is there a way to prevent that ?
i'v tried onbeforeunload , it worked for a while , but it seems even that isn't working anymore.
No, not really - if website has script like top.location = "mypagehere"; then the other page will load outside the frame, or if it has alert() alert will show up.
The only way around this is using server side language to read the contents of those remote sites then put only the contents, without any scripts, inside your own placeholders.
If you have server side language at your disposal edit your question and put comment here so that we can guide you further.
I am using an iframe to embed content from another site. The button in the iframe opens an overlay with a form. The problem is when the button is clicked, the overlay does not open fully. The problem is not from the overlay but from the iframe and parent.
The site i am testing on is at www.sycotickets.com/form.php. you can check it and click on the button at the bottom to see the problem. I also learnt javascript can be used to embed. Can anyone please pint me in the right direction on both issues?
There are 2 possible answers when using AJAX to load page content from a different server
1) Both servers are in a similar domain (s1.example.com, s2.example.com) in which case, you can set the domain to simply be example.com which allows full functionality withing AJAX calls.
2) Servers are on completely different domain - The server which provides the content (currently for the IFrame) must provide the data using the JSONP protocol (note the P!) this means the resulting data is loaded into a script tag which then executes. The data itself contains a JS function call eg:
{data: '<pre>Some Html</pre>'}
is actually returned as:
function SomeFuncNameSpecifiedInTheRequest({data: '<pre>Some Html</pre>'});
Instead of doing an AJAX call, you dynamically add a script tag to the page, something like:
<script type="text/javascript" src="http:/www.example.com/GetMyData.php?WrapperFunction=SomeFuncNameSpecifiedInTheRequest">
You then implement SomeFuncNameSpecifiedInTheRequest on your page and process the results when it's called. JQuery implements this functionality for you automatically (at least the client-side bit.)
See here for more information on JSONP and here for more information on setting the domain
Nothing you can do really. If it's loading from an external site browsers prevent you as a developer from accessing other sites and modifying them to try and prevent XSS attacks. You could try to fake it by moving the iframe where you want it dynamically and overlaying the black on click on your end... but that seems pretty kludgy...
I'm trying to display an map inside an iframe that has a needle which on mouseover shows some information about a certain company, the thing is once you click the link the page opens up inside the iframe which ruins the experience, so i was wondering is it possible to make the links inside an iframe open up in a new window instead perhaps using jquery or something similiar?
the code i have atm is
http://www.jsfiddle.net/rkd59/1/
Edit: the very least capture a click within the iframe so i might resize the iframe
You will need some kind of open API to do this properly, and Eniro doesn't provide one according to this page (in Swedish).
I would recommend you to use the Google Maps API v3 instead. I've made an example on jsFiddle that looks similar to that of Eniro.
I'll gladly give you more help with this, so just ask away!
You can't (or it is extremely hard to ) make events inside the iframe affect the parent page. This is to prevent attacks from XSS, or cross site scripting. Having said that, if the site within the iframe is on your own domain and you want to set up some extremely tricky ajaxing and php session IDs, maybe you could make something work, but even then I'm not sure. And I don't know if this would be a security hole, maybe someone else can speak to that. It would perhaps look like:
main page sets up session ID and passes that to the iframe url via a get variable
the iframe takes click information and sends it to a Session variable via an ajaxing call to a script on the server.
The main page then reads (how?) the session cookie and makes changes based on it's value.
All in all, you may find that it may be much simpler and more secure to acheive what you want using a different method.
Due this map is loaded inside an iFrame, it's not possible to run any javascript event listeners on the links, neither is it possible to change the html.
Please try the following:
<script>
x=document.querySelectorAll("a");
for(i=0;i<x.length;i++)
{
x[i].setAttribute("target","_blank");
}
</script>
Thus all links open in new frame.
To make a link popup in a new window you would usually use target="_blank" as such:
Go to Yahoo
However this will only work if you can modify the code you're showing within the iFrame
There is a partial solution.
You can add an absolutely positioned DIV tag over the top of the IFRAME and capture clicks on this instead. See example here shaded in 20% alpha red.
http://www.jsfiddle.net/rkd59/6/
However, this means that the map works in "read-only mode" and while you can capture the click event you wont know what link the user has clicked on.
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.