My object is to remove the scrollbars of an iframe for cross domain servers, which I don't have access to.
Page A has an iframe which displays contents of an external server
The content is not fixed, its height changes with time so I can not fix the height, it has to be dynamic.
It has to be handled with JavaScript. I have a list of objects corresponding to the users selection. When a different selection is made, different content types are shown.
I have tried to a solution with postMessage, but it does not solve the problem as I don't have access to the server. I was thinking more of a view, which resizes the iframe when the page is loaded.
You can't. There is no way to determine the size of a page in a cross-domain iframe without explicit support from scripts running on that page. Since you've already said that you can't modify that page, there's no way to do this.
Related
I am allowing a part of my site to be shown in another site (different domain).
My concern is to set the height of iframe to the height of its content. I could use this solution, but my case is cross browser case, so this doesnot work.
I tried to get the height of iframe by:
window.parent.document.getElementById('id_iframe').contentDocument.body.scrollHeight;
but this is giving only the visible height.
What am I missing?
You can't use JavaScript to access content the user has loaded from another domain. It would be a security risk.
With the cooperation of the other site, you can receive a message (via postMessage) sent by the other site when its load event fires that tells you its height (and then you can resize in response to that).
It could also sent new heights when resize events fire in it.
Is it possible ?
I've made on page with iframe, I want a script that'll click automatically inside in one iframe's link.
But I also want that script to detect half link, I mean the link which is in iframe changes everytime, but the first part of the link doesnt change, so the javascript should detect half link which doesnt change and redirect to it...
Why don't you write a "client" library and import it within iFrame. This library listen to a message from HTML5 postMessage call with certain attribute and react appropriately. Since you have access to the parent object through the event object (or window.parent), you can also send response back with the result. This way, it doesn't matter if it's cross-domain and as long as this library exists, you can communicate back-and-forth and even has the iFrame initiate if you write it properly.
I can't share the code with you since it's our proprietary library, but that's part of the idea.
If the content of your iframe is from a different domain, you can't. Allowing this would be a major security concern.
If your iframe content is in the same domain, then you can access the iframe content through its contentWindow property. You can then work with your iframe link the same way you would if the link was in the main page.
Background:
I am trying to iframe an entire external website for a project. Some links within this external site are within even more frames. They use js to access the top window and set its location according to the href value of the link, which results in the new page loading completely outside of my iframe (which I would like to avoid).
Question:
Has anyone dealt with this/is there a way to deal with this? Ideally I would like to prevent the iframed site from accessing frames outside of its own.
Note:
As per my knowledge it is not possible but still want to have a second opinion
Thank you very much for any help or insight,
To get around the restriction for the iFrame sources, the only way you can do it by setting up a web proxy script on your website.
<iframe src="proxy.php?url=http://othersite.com/">
you should be able to find some proxy implementation on some script site.
I have an iframe that loads a form from another site into my site (I control both domains but they are different).
The iframe is loaded into a fancybox on my site and I would like it to popup an AJAX loading graphic when the form in the iframe is processing.
I know I can't directly add event listeners to the iframe form other site but is there any way that my site can know what is going on in the iframe?
No there's no way of knowing what another iframe is doing.
Have the domain (the one inside the iframe) load the AJAX loading graphic before the content shows up, all on the server side... you don't need the client for this.
I agree with Luca, but then your form will have to be loaded before the AJAX loading graphic can be displayed. If it is a very large form, this might take a while and will perhaps defeat the purpose of the loading graphic.
Have you considered loading the contents of the form via javascript instead, bypassing the iframe altogether? Just GET the contents of the form and load it into a div? (Granted, if the form you're loading is complex, that might cause more problems)
It is absolutely forbidden by browsers to know what is going on in the iframe.
The scene: I'm writing an embeddable widget. It takes the form of a <script> tag, which builds an iframe containing everything it needs to display. The iframe has no src, and the script writes to it with theIframe.contentWindow.document.write(). This keeps the widget contained, and keeps element ids and script from conflicting with the page on which the widget is embedded.
The trick: The widget has to be able to change its size. To do this, it sets its containing iframe's style.height. This requires access to the outer page's DOM. In Firefox and IE, this is allowed, because the iframe's document and the outer document are considered to share an origin.
The twist: In Safari, however, the two documents are considered not to share an origin. The inner document is considered to be at about:blank, while the outer document is clearly using a different protocol and "domain" (if blank can be considered the domain).
The question: How can I build an iframe programmatically whose document Safari/WebKit will consider to have the same origin as the document of the window creating it?
Edit: After further experimentation, I can't find a way to programmatically create an iframe whose location is not about:blank regardless of whether I change its contents.
If I create the frame with document.createElement(), give it a src which points to a real HTML resource on the same origin called "foo.html", and document.body.appendChild() it, Safari's console shows the element as expected in the DOM, but the contents of the page do not appear, and the document is listed in the sidebar as "about:blank".
If I include the HTML for the iframe directly in the page, the contents of foo.html appear, and "foo.html" appears in the sidebar.
If I insert the HTML using document.write(), I get the same result as with document.body.appendChild().
Both programmatic versions work in Firefox.
The best suggestion I could give is to have the iframe set to a blank page on the same server (ie blank.html) and then edit the content. A pain in the rear, I know but it's a workaround.
You could also try
iframe.contentDocument.open("replace");
iframe.contentDocument.write("<b>This is some content</b>");
iframe.contentDocument.close();
However, I'm not sure if that only works in IE. Sorry I couldn't be more helpful than that.
Aha. This seems to be a bug in WebKit. When an iframe is created programmatically, its src attribute is ignored. Instead, the frame defaults to about:blank and must be directed to a URL to point elsewhere. For example:
theIframe.contentWindow.location = theIframe.src