5

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

Noname
  • 51
  • 4
  • 1
    https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy – Matteo Tassinari Jun 04 '15 at 07:43
  • I think it will not work on cross-domain due to security issues – khakiout Jun 04 '15 at 07:45
  • No until you have some control over both domain. http://blog.cakemail.com/the-iframe-cross-domain-policy-problem/ – Ali Jun 04 '15 at 07:52
  • possible duplicate of [Using CSS to affect div style inside iframe](http://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe) – Mr_Green Jun 04 '15 at 07:58
  • possible duplicate of [How to change style of iframe content cross-domain?](http://stackoverflow.com/questions/4724904/how-to-change-style-of-iframe-content-cross-domain) – Matteo Tassinari Jun 04 '15 at 07:59

2 Answers2

0

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

Community
  • 1
  • 1
odedta
  • 2,430
  • 4
  • 24
  • 51
0

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.

PEM
  • 1,948
  • 14
  • 13
  • The `seamless` attribute is like you say next to [not supported at all](http://caniuse.com/#feat=iframe-seamless). Also it seams the owner of the ` – Nico O Jun 04 '15 at 08:20
  • Definitly, hence all the warnings and disclaimers :) As a side-note W3 still displays the seamless attribute in the doc (http://www.w3.org/TR/2012/CR-html5-20121217/embedded-content-0.html#attr-iframe-seamless), but it is mentioned as "at risk of being dropped due to the lack of implementation" in discussions. In any case, I pointed out that it existed and *could* work in some environments (if you can enforce the use of a specific browser in a specific version) and that I would not recommend using it anyway :) – PEM Jun 04 '15 at 08:53