Is it possible?
I want an make an adaptive layout but neither CSS or JS can force the iframe content to change from the calling page.
However the the iframe pages and the caller use the same CSS and JS file.
This is only possible, if they are from the same origin. It doesn't matter if both use the same CSS or JS file. That means, both are using the same domain name, application layer protocol, and (in most browsers) port number. (Same origin policy)
If you are sure that you fullfil the above mentioned requirements, please check the following links:
Adding a stylesheet to an iframe
How to apply CSS to iFrame?
How to load up CSS files using Javascript?
Related
I want to change styles css inside at a iframe, using:
$("#box_close").click(function(){
("#iframe").contents().find("#scrolling_box").removeClass("scrollingBox");
$("#iframe").contents().find("#scrolling_box").addClass("scrollingBoxCustom");
});
Not working ok because the attribute src is in different host that index file, so it gives a classic browser policy error when trying to access a resource that is not on the same host.
Is there some another way I can change styles from the html content of an iframe from a page hosted on another server?
Thanks,
Currently we are trying to access the HTML of (with javascript) dynamically generated html-elements (e.g. to get the url of an image). If the html-elements are generated with javascript only - their is no problem. Just extracting the image url with javascript by accessing the DOM elements. But now we have trouble with an iframe.
This is the situation at the moment:
We include external script-file (www.test.com/script.js) to create a gallery on our website
The script.js generates a new iframe in our website (document.write('iframe code here')); referencing to www.test.com/iframe.html)
The iframe.html contains javascript-code again to generate the gallery by creating serveral dom-elements (divs, imgs, a, p,....)
Now we need to read the src-attribute of these images. With the debugging tool of the browser, it is no problem. Without the iframe, it's also no problem. But with the iframe, because of the cross domain policy of the browsers we can not access the html of the iframe.html with javascript.
One possible solution was to try to get the src of the iframe tag with javascript, call a server-side script to get the html content of the src-url and run the content via eval()-function on the client again.
I hope you have other better ways to solve that.
It is not clear from your question, but if the iframe is being served by your app, you can use postMessage in order to communicate between the iframe and its parent window.
I have a website example.com and another website example1.com. i want to display example1.com as the iframe content in example.com site.
For example:
Include this in example.com <iframe src='http://example1.com'>
and add the jquery script in end of body in example.com. this is not working in cross domain. so any tweaks to this please
$(document).ready(function() {
$("#Frame").load(function(){
var timestamp = +(new Date());
$("#Frame").contents().find("head").append("<link href='http://xxxxxx.com/style.css?'+ timestamp +'' rel='stylesheet' type='text/css'/>");
});
});
so when the example1.com iframe loads in example.com the xxxxxx.com/style.css must be included in the header of example1.com iframe to change its css content
NOTE: I don't have control over example1.com which is the iframe content
The CMS i am using doesn't allow me access the server side. So manipulation can be done at the client side only. So solution like using proxy won't help.
I know about cross domian policy. but even some people do manipulate. thanks in advance
The only possibility would be to load the iframe content through a proxy of yours and modify the HTML content. You can not access iframes from another domain via JavaScript.
Reference
Reference2
Warning : This might not work as browsers implement and remove this feature more or less regularly.
One thing that you might do but which can break your website design (I would not recommend doing that unless you REALLY do not have any other choice) : use the seamless attribute on the iframe and enforce CSS styles with important on the elements you want modified.
https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe
I believe that it is really not that well supported, and I provide this information as a thing to try if every other failed.
I think this option is not avaiable, but maybe you know some strategies for doing it!
I'm on http://www.mydomain.com, and I put an iframe with jquery of another domain :
<div id="myContent"></div>
$('#myContent').html('<iframe id="myFrame" src="www.anotherdomain.com"></iframe>');
Well, the page that I load, www.anotherdomain.com, it's mine, so I can add any kind of code!
What I'd like to do is set the height of myFrame regard the real size of the loaded page (which I can't know, it can changes during the time).
Is there a method where I can comunicate to the parent DOM (mydomain.com) the size of the inserted page (anotherdomain.com)?
I don't know it, I dubt so, but why don't ask.
You can send messages (such as the height of the frame) between iframes on different domains using postMessage: https://developer.mozilla.org/en/DOM/window.postMessage
The only solution I found for that was to pass iframe height via url. You can find my test here :
http://jsfiddle.net/Grsmto/nBWrJ/2/ (updated)
This solution works cross browsers (chrome, ff, ie all versions, mobile etc.) and cross domain.
You MUST have access to the iframe code itself AND the iframe host.
You can refresh the iframe height when you want (even if content change) just by calling the publishHeight() function inside your iframe.
This should work without jquery (mostly writen in pure javascript...).
The only inconvenient is that you will have the height in the url like :
http://www.yourdomain.com/index.html#1458px
But you should easily remove it or change it to something less ugly.
EDIT : It seems that Disqus and Twitter use this library to do that : http://easyxdm.net/wp/
EDIT 2 : On your page you put the code on the first jsfiddle page. In your iframe you put the code of the iframe (the red div "myiframe" in bottom right). Hope it's clear...
But check my link below it should be a better and easier solution.
Cross-domain communications are very limited, and impossible depending on the on the remote host. http://www.ibm.com/developerworks/library/wa-aj-jsonp1/ You can use JSONP to try and retrieve information from the remote site, but its very trying and not for beginners.
The work around that I found that worked for me was I used a server side language instead to include the remote file. so instead of < iframe >
I did a PHP server-side include like:
<?php include 'http://www.example.com/file.txt?foo=1&bar=2'; ?>
This of course only applies if you are using PHP. Once I included it that way I was able to manipulate the DOM elements.
I add iframe from external site to mine like this:
<iframe src="http://site.com/page/"></iframe>
It has some own css and javascript files.
How can I add my own css styles to this iframe?
If the iframe source is not the same domain as your site, you can't add your own CSS to it due to same origin policy.
Are you trying to format the iframe border or its content? The latter isn't allowed for security reasons, the former can be archieved with a simple stylesheet (selector "iframe").