apply css to iframe(no control over this domian) using javascript - 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.

Related

How to show insecure content in iframe

In short , I'm developing a google chrome extension , when I add any url starting with http:// to source attribute to an iframe, I get a message like :
[blocked] The page at 'https://www.facebook.com/' was loaded over
HTTPS, but ran insecure content from 'http://youtu.be/m0QxDjRdIq4':
this content should also be loaded over HTTPS.
and I don't see the content in the iframe !
so how can I overcome this ?
what I want to achieve is that : I hide facebook adds , and in its place I added an iframe instead, I detect when the mouse is hovering over a link contained in a post, then I want to show the link's content in an iframe.
What are my possible alternatives? I don't need to enable showing insecure content in chrome because it is a chrome extension that I will publish!
It seems that the security limit is strict, so we need a way to work around that.
What if you could load the page using other means than an <iframe> and insert it into the page afterwards? There are multiple ways to do that, ranging from more practical to less realistic.
You can use the Chrome captureVisibleTab API to generate a screenshot of a website as an image, exactly what you need. It sounds like you need a visible tab to use this API, but you can actually specify any Chrome window as a target and you can create Chrome windows unfocused and hidden behind the edge of the screen.
If captureVisibleTab provides trouble in step 2, there is also pageCapture API to get an entire page as a single content object.
You can also use a server to create screenshots. Serve a simple application over HTTPS that uses PhantomJS to create a screenshot. An advantage of this approach is your server is likely to be much faster at screenshot generation. The disadvantage is you need to pay for the server.
You could also use xhr in your extension background process (which is not limited by the security limitation) to get the HTML. This wouldn't get any resources, but that could be a beneficial thing if you want a very quick if inaccurate screenshot. Just load HTML, parse and detect links to stylesheets, download them and inject those stylesheets into the HTML as <style> tags.
The resulting HTML can be injected to the <iframe> manually. You could even inject scripts and images this way, but that would be harder and less useful, since you need a quick screenshot of how the page looks like.
I think using built-in Chrome functionality for screenshots is the best bet, if only you can make the user experience good enough.
First and stupid way: change http in link on https. But youtube and I think many other sites don't allow to show their content in iframes. try it and you get Refused to display 'link' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Second and at least stupid way: remove protocol from link, like //youtu.be/m0QxDjRdIq4 and you get protocol, that on this page. But a situation similar to the previous.
Third way for youtube only: you can generate iframe with src like //www.youtube.com/embed/m0QxDjRdIq4 and user can see the video.
Fourth way, not for all sites: use site API's - not a best solution, but like a option.
Fifth way, but impossible (I think): try to get page's content with javascript and regenerate it in way, that you need.
Sixth way, needs powerfull server: create an service on your server, which will download pages and resend it to users. One problem - linear dependence server's power of requests.
Seventh way, I forgot that it's extension: you can open link in another tab/window, get it content, close tab/window and show content in tab that you need.
Eigth way, the best, I think: use YAHOO yql like this:
$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select"
+"* from html where url='youtube.com/watch?v=m0QxDjRdIq4'"
+"&format=json&diagnostics=true&callback=?"
, function (data, textStatus, jqxhr) {
// process data
}
}
Demo on jsFiddle

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

How can I change IFRAME height when the source it's on another domain?

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.

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?

How to insert my web page into an iframe?

I have a web page that I am hosting for a client. The page has the client's header and footer on it and our content (a flash app) placed in the middle.
The client now wants to provide us with an html page that contains their header, footer and some ads all in one document. They want us to include this document as an iframe and then dynamically place OUR content inside of that frame.
This seems very hacky to me but I thought I'd give it a shot. So what's the best way to take my markup and place it into the iframe?
Thanks!
Chris
Can't be done client side because of XSS security issues ... unless they are both on the same domain, but from your description, i doubt it.
Server side, you could dynamically read the target page, modify it any way you wish and then present it. If you really do need it in an iframe, you can dynamically load the modified source you got by something like this:
<html>
<head></head>
<body>
<iframe id="blah"></iframe>
<script>
var doc=document.getElementById("blah").contentDocument;
doc.open();
doc.write("content");
doc.close();
</script>
</body>
</html>
Just remember to also change any links, images, and so on with full URLs.
Can you supply them with some API they can use - so they can place something in their page to call your bits. As you are working with flash, you could avoid cross site scripting issues by including a policy file to give permission to their domain.

Categories

Resources