overwrite css in iframe/ cross domain with access to other domain - javascript

I am working on a Project with an IFrame. Here is my question:
I want to take the css and Stylesheet from my Website into an iframe. The Content of the iframe is from another Domain, but I have full access to this Domain. The parentpage of the iframe has only simple html Content without any Stylesheet or css.
How can I make this work? Is it possible to write a script in both pages to adjust the css of the iframe?
Other questions and Solutions are about the same Domain or cross Domain without access to the parentpage of the iframe-content.
Thanks for the answers.
Marcel Mutz

Even if YOU have access to the other domain, that does not mean you can overcome the same-origin policy setup in the browser. You won't be able to change the styling in the iframe if the contents of that iframe originates in another domain.
More info from Mozilla

Related

Modifying width and height of a div element inside an iframe - cross domain policy

I have a domain and a subdomain. Domain is under my control, the subdomain is pointed to an affiliate whitelabel website, i.e. DNS points to their IP. I want to load the products through iframes on the domain.
I understand that I cannot use JavaScript to change the styling due to the cross domain policy. What I want to accomplish is to modify the height and width of a div deep inside the iframe.
Using a php simple load content is not working, because the page is heavily scripted, and if I am doing that, the framework of the page appears, yet no content is available.
Please point me to a practical solution? I know jquery enough to be able to replace, add styling to things on the same domain, iframe or not iframe. But I have no idea how to do it on the subdomain.
I can control the subdomain, ie I can change the dns back to what I want, but that will stop the whitelabel site from working. I can't add any headers.
The postMessage function should help you here, provided you can put your own JavaScript code on both domains.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Something like this should work:
Parent
var iframe = document.getElementById("whatever");
iframe.contentWindow.postMessage("hello");
Iframe
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
if (event.origin !== "http://your-parent-domain.com") return; // for security
// do something here with event.data
}

apply css to iframe(no control over this domian) using javascript

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?&apos;+ timestamp +&apos;' 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.

See which page loads mine in iframe

I have a page that people load in an iframe (its like a widget they can put on their pages) and I want to see which pages are loading it... is this possible?
No, that's not reliably possible due to the Same origin policy.
(You would have to read the value of parent.location.href, which is not possible.)

Change iframe content css from the caller page of the iframe

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?

Apply CSS to iframe

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").

Categories

Resources