Iframe Change Content CSS Style [duplicate] - javascript

This question already has answers here:
Override body style for content in an iframe
(11 answers)
Closed 9 years ago.
I do have an iframe inside my webpage, but i want to change the css / font styles etc.
<iframe name='iframe1' id="iframe1" src='<?php echo "http://micro.shoretel.com/www/?v=$version&s=$style&l=$logo&p=" . $_GET["p"] ?>' frameborder='0' width='660' height='450'></iframe>
How do i override the CSS style of the iframe's content?

If the iframe loads a page on your own domain, and you want to statically change the iframes styles, you could just change the style rules in the CSS file, this is what #Justin808 is referring to.
However if you want to dynamically change the styles, and the iframe loads a page on your own domain, you could do this using jQuery:
$("iframe").contents().find("element-selector").css("border-color", "blue");
If the iframe loads a page on another domain, you're out of luck, follow this link, where you can read up a bit on why that doesn't work.
If you're using HTML5, you can use postMessage to communicate between the page and the iframe.
#crdunst's solution will work if you have "editing access" to the page inside the iframe so that you can edit it to understand the parameters which are passed to it, and then make it act upon those parameters. It is not as dynamic as using jQuery as it only allows you to change styles by reloading the page inside the iframe and passing it another set of parameters.

I'm not sure if this is what user2146515 is referring to, but if you have access to the page within the iframe, you could pass values on the url, and then use those values within your iframe content:
<iframe src="http://www.youriframecontent.com?bg=ffffff&text=000000"></iframe>
Then within the iframe page, check for the value and add styles based on those values

Related

change css element inside iframe

i have one probleme with iframe in my website i can't change css of some element inside the iframe. this the html of iframe when i inspect code via chrome.
i want to change the value of div under div class with class width-100.
i already try a lot of code without success.
i found this solution but i dont understand
/*******/
CSS is only scoped within the same document. An iframe is an entire document in its own right, and so a CSS rule that applies to the page that contains that iframe cannot apply to the page that's within that iframe.
This means that as far as HTML and CSS are concerned, html is always :root (and therefore can never be :not(:root)).
Unless you are able to transfer this CSS from the containing page to the page within the iframe (using a script for example), I don't believe there is a way using just CSS.
Css–selector for when a html-document is inside an iframe?
/*******/
Try it.
$('iframe').contents().find("width-100 div").css('height', '200px');

How do I access different iframes? [duplicate]

This question already has answers here:
How to pick element inside iframe using document.getElementById
(6 answers)
Closed 5 years ago.
I am working with a website that uses different iframes on the same webpage. I am wondering how I can access and manipulate an iframe that I am not currently focused in on.
The website has a body that allows users to type in, and I want to use the method innerHTML (javascript) to set the value of text in the box. However, I'm having trouble accessing the iframe.
Here is the Javascript that I was trying to use, but it wasn't working as I intended.. getElementById is not a function of getElementsByTagName("iframe")
document.getElementsByTagName("iframe")[1].getElementById("tinymce").innerHTML="Hello, world!"
Here are the two iframes that I am working with:
I cannot inspect the page and change the iframe by hand, so that is not an answer I am looking for. Thank you for clearing things up for me!
EDIT:
As suggested, I try
document.getElementsByTagName("iframe")[1].document.getElementById("tinymce").innerHTML="Hello, world!"
However, I am still receiving an uncaught type error
The outer HTML does not have access to the IFRAME html. If you are intending to change the part of the HTML then probably iframe is not the correct solution.
However, you could pass a parameter to the iframe src which will cause the intended change.
EG.
if you have iframe whose background needs to be changed based on an action on the outer HTML:
<iframe id="example" src="https://example.com?background="></iframe>
you can change the background to blue by changing the src url with a parameter
document.getElementById('example').src = "https://example.com?background=blue";
And within the iframe site HTML you can parse the query parameter and change the background.

Giving iframe properties from inside

So I am currently working on an application that runs on top of the customers page inside its own iframe.
Application works in backbone and everything else except the initialization of the iframe is done inside the iframe. Initialization happens with a small javascript snippet that the client will copy to their footer.
The problem I'm currently having is that I have to inject a CSS file to the parent site in order to style my iframe correctly when it's rendered and I really don't think that I should tamper with clients page at all since CSS might have some conflicts in it.
Is there any better way to style the iframe than the current way of doing it?
I think you have two different options;
Inline iframe styles
Give your client a pre-styled iframe to embed, like this
<iframe src="yoururl.com/client"
frameborder="0"
style="border: 0; width: 100%; height: 600px;">
</iframe>
Embed through script tag
Create a small script tag (that you host) that you give to your client. Inside the script you dynamically create the iframe dom element and possibly other external css-files that you need
Host a JS file, like //yoururl.com/iframe.js
var iframe = document.createElement("iframe");
iframe.setAttribute("src","http://yoururl.com/client");
document.write("<div id='mycontainer'></div>");
document.getElementById("mycontainer").appendChild(iframe);
Then you can give this to your client to put in their page where they want the iframe to show up.
<script src="//yoururl.com/iframe.js" type="text/javascript"></script>
You can provide your css separately to the client. If that is not an option, then you need to do it the way you are doing now (injecting the parent style from within the iframe). However, this does not seem to be a good idea, unless your css rules are pretty unique.
There are many ways but it could be possible that no one is applicable:
Ask the client to style your iframe (inline or with css)
publish the iframed content on the same domain of the main website and check if the parent frame is accessible via javascript
Ask the Client to enable the header "X-Frame-Options". Maybe with something like "ALLOW-FROM SAMEDOMAIN, www.youriframedomain.com". It seems it is deprecated, check for Content-Security-Policy instead.
embed it via script tag
Check for window.postMessage: it requires anyway an additional script in the main website that listens for the message (it could be the css text itself) from the iframe and applies the new style
You should be able to use window.frameElement to refer to the iframe element which your page is embedded in. With that reference, you should be able to modify the style attribute to change how the frame renders.

Creating a Simple Layout/Style Editor

I am trying to create a layout/style editor similar to what is available on blogger. I noticed that they use an iframe, but the iframe has to refresh everytime you make a change. I am looking to do something more responsive. For example, if i change the width of a div I would like to see this change happening while I move the slider.
I was wondering if something like this is possible with the iframe setup using jquery/etc to modify the source of what is in the iframe, or is it better to not use an iframe?
The iframe would be used to load an existing webpage that is online.
The good thing with an iframe is that is not interfeering the rest of the page (you can use diffrent CSS, scripts, variable names and so on). TinyMCE and other editors uses iframe for its content. And yes its possible to access the iframe directly from jQuery:
See this link, http://jsbin.com/ajatix/edit#javascript,html,live

iframe content loading [duplicate]

This question already has an answer here:
Closed 11 years ago.
Possible Duplicate:
Getting contents of iframe
Javascript: I need two examples.
Get content of loaded iframe which src is not on same server as parent page.
Get content of loaded iframe which src is ON the same server as parent page.
By content I mean InnerTEXT or innerHTML, or anything. Goal is to transfer variable from one page that is not on same server to other. This was my first thought. If there is any other way to transfer variable within javascript.
Sounds like homework. What have you tried so far? Are you allowed to use jQuery? Show us your examples.
EDIT:
Since you are allowed to use jQuery try going down this path for your solutions:
$('#iframe').contents().find('input').val();
It is not possible to transfer a variable from another website. But you can call functions which are defined in parent.
You make this function on your main site:
function helloWorld(text) {
alert(text);
}
And you call from inside of the iFrame with parent.helloWorld('hiho!');. This should work with the same or any different domain, but you need to access the different page, to add the method call!

Categories