I have two websites, example.com and example1.com. I'm trying to display the content of example1.com within an iframe on example.com.
For instance:
Add this code to example.com:
<iframe src='http://example1.com'>Then add the following jQuery script at the end of the body in example.com. However, due to cross-domain restrictions, this method isn't working as expected. Any suggestions?
$(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'/>");
});
});
When the iframe from example1.com loads on example.com, the style.css file from xxxxxx.com should be included in the header of the iframe to modify its CSS content.
NOTE: I don't have control over example1.com (the iframe content).
The CMS I am using restricts server-side access, so any manipulation needs to be done client-side only. Methods like using a proxy server won't work in this scenario.
I understand there are limitations with cross-domain policies, but some solutions do exist. Thank you in advance!