I have an html page with css, I need the css to control the content of an iframe on that page. I have control of the page in the iframe and the following code works if both the page and frame are local to each other:
<script type="text/javascript">
window.onload = function() {
if (parent) {
var oHead = document.getElementsByTagName("head")[0];
var arrStyleSheets = parent.document.getElementsByTagName("style");
for (var i = 0; i < arrStyleSheets.length; i++)
oHead.appendChild(arrStyleSheets[i].cloneNode(true));
}
}
</script>
However does not work when the page with the iframe and the page the iframe is on are on separate domains. Does any one have any idea how I could get it to work across two domains, or have an alternative solution?
Thanks in advance :)
as it is my page that is displayed in iframe could I not just allow users to have their css override mine??
The site you load in the frame must grant you permission using CORS before you can instruct your visitors' browsers to exchange information between it and your site with JS. By default this is forbidden for sensible security reasons.
Add this HTTP Header on the target site:
Access-Control-Allow-Origin: *
See http://ox86.tumblr.com/post/17652823257/cross-domain-ajax-for-your-api-endpoints
You have to use Cross-document messaging. Basically, the algorithm should work something like this:
in the parent frame, add a message listener f before the iframe is loaded.
in the iframe, set up a message listener g and send a message to f after onload
f sends the CSS urls as a JSON-serialized message, and g loads the CSS into the iframe
Related
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
}
I have a website which is built using WP and uses SSL. On one of the page on my website, I have added an iframe call to another http website.
Here is my iframe call:
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//childwebsite.com/" target="_blank"></iframe>
</div>
The iframe is displayed properly. Now when you click on anything inside the iframe, Chrome displays a message saying
Mixed Content: The page at 'https://parentwebsite.com' was loaded over HTTPS, but requested an insecure resource 'http://childwebsite.com'. This request has been blocked; the content must be served over HTTPS.
What I am looking for is when a user clicks inside an iframe, open a new tab in the browser and let the user be redirected to a particular on the childwebsite.
I tried adding target="_blank" to the iframe but it did not work.
I added the following JS also but it did not work
//pass the iframe to this iframe getting function
function iframeRef( frameRef ) {
return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}
//Get Iframe
var inside = iframeRef( document.getElementById('smugmugGallery') );
//Get all links
var links = inside.getElementsByTagName('input');
//Loop throught links and set their attributes
for (var i = 0 ; i<links.length ; i++){
links[i].setAttribute('target','_blank');
}
Any help will be appreciated.
You have two issues here. An SSL issue, and a cross domain issue.
Your SSL issue can only be solved by serving the iframed content via SSL or serving the parent page via non-SSL. This will remove the security alerts you are seeing.
You cannot assert control over iframed content if it comes from another domain, well at least not easily for cross browser purposes.
From the Mozilla dev site:
Scripts trying to access a frame's content are subject to the
same-origin policy, and cannot access most of the properties in the
other window object if it was loaded from a different domain. This
also applies to a script inside a frame trying to access its parent
window. Cross-domain communication can still be achieved with
window.postMessage.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting
Use base tag in iframe and try once.
<base target="_blank" />
you can see more about Base tag here
I have a simple html page. It has a iframe to some other site. I want to change the color of anchor tag that is nesteed in that Iframe. is is possible to access Elements of Iframe via javascript
If the other page is in another domain, due to cross-domain security, it will not be possible to edit HTML content of an iframe from the main page.
There are workaround for this, such as writing the change you want to make in the url. But this is really dirty.
If it is in the same domain, i suggest using, as example:
$('div', $('iframe')[0].contentWindow.document)
for getting all div elements inside your iframe
I did it by using following code
function loadFrame(){
document.getElementById('pcl_frame').contentWindow.document.getElementsByTagName('a')[0].style.color='blue';
}
You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.
Remember, the same origin policy applies, so you can only do this to iframe is coming from your own server.
frame1.$('mydiv').style.border='1px solid #000000'
or
frame1.$('mydiv').addClassName('withborder')
You can get the values of the elemets inside the iframe using
$('#iframeId').contents().find('#id-of-element-inside-iframe');
But the values cannot be altered.
There is just one simple solution, which will only work when you own the content in the iframe.
In your parent source add:
<script type="text/javascript">
var innerDocument = null;
</script>
In your iframe add:
<script type="text/javascript">
parent.innerDocument = document;
</script>
When the iframe is loaded you can now target the iframe's document by using innerDocument.
This circumvents the cross-domain security.
I am trying to achieve this:
I am working on a script that checks a Page for iFrames(done), but than it tries to find the VIDEO Tag of HTML5 in it, store its source, than remove the iframe and replace it by a new VIDEO Tag created with the previously retrieved source, the script shall grab the Element from cross domain Sites like YouTube e.g.
So currently I was able to find all iFrames via getElementB
and btw: JavaScript ONLY
It is impossible to do it cross domain because JavaScript has the same origin policy that prevents accessing the content from different domains.
As mentioned within another answer, this is not possible to do in a cross domain setup.
If this is not an issue, you can access the document of the iframe using the following:
var iframeElmnt = documentGetElementsByTagName('iframe')[0];
var iframeDocument = iframeElmnt.contentWindow.document;
var videoElmnts = iframeDocument.documentGetElementsByTagName('video');
You can then hunt through the videoElmnts to figure out which one you should insert into the current page.
I have a page P1 loading from site S1 which contains an iframe. That iframe loads a page P2 from another site S2. At some point P2 would like to close the browser window, which contains P1 loaded from S1. Of course, since P2 is loaded from another site, it can't just do parent.close().
I have full control over P1 and P2, so I can add JavaScript code to both P1 and P2 as needed.
Suggestions on how to resolve this?
It's impossible, I am afraid. JavaScript from an iframe that is loaded to a different site then the one it is being rendered on is strictly prohibited due to security issues.
However, if the iframe is pointed to the same site you can get to it like:
<iframe name = "frame1" src = "http://yoursite">
</iframe>
<script type = "text/javascript">
alert(window.frames["frame1"].document);
</script>
If they originated from the same domain, you can modify the security-restrictions to allow modification between sub-domains.
set document.domain = "domain.com"; //on both pages and they are allowed to modify eachother.
It might work to just set them to a bogus-domain, haven't tried that, or just simply ".com" or something.
It looks like this guy got cross domain JavaScript working between iframes.
You can use Flash to do this. Send the user to a new top-level page that you control with a URLRequest with a _top target, and have that page contain javascript that does a window.close().