change css element inside iframe - javascript

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');

Related

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.

What are the differences between iframe and innerHTML

I was doing an innerHTML on a div element. MY lead comes and tells me that innerHTML and iFrame are both the same. Now this one was something new. I always thought InnerHTML to be different from iFrame.
[My lead]: "The issue is because he is trying to use innerHTML which
in turn is called as IFRAME for a browser"
I wanted to know the differences between an iFrame and innerHTML. Are they both essentially similar in nature? I looked but couldn't find much.
Thanks
Sounds like a communication error--e.g., if your lead means that the innerHTML of that div is just going to show an iframe as its innerHTML (or otherwise, it would sound like you need a new lead). innerHTML grabs the HTML code as a string inside of the selected element. An iframe is an element used for transcluding content (usually from other sites or other pages on your own site). Apples and oranges...
They're very different. An iframe tells the browser to load a different URL in the iframe, and it will often have it's own scrolls. But a div can be made to look and work like an iframe by setting
overflow: auto
- in the style. Maybe that's what he meant.
iframe is an HTML tag used for displaying another website or page on your page, innerHTML is used in Javascript to change the content of an element on your webpage.
They are completely different.
They are not the same. Innerhtml is a way to access the contained html of an html element. An iframe is an element that let's you display content from a different web page than the one you're currently on.

Preventing CSS of Jquery Dialog content from being applied to main window

In my web application, I have written a cross-domain ajax call which is fetching an HTML page from a different domain. This newly fetched page is being rendered in a jQuery dialog using the following code $('#previewDialog').html(response).dialog('open');
This renders the response properly in the dialog. However, the response (HTML page) also has some CSS styles in it. These styles (generally BODY, INPUT etc) are getting applied to my main window (parent page) and distorting the complete view of the page.
When the dialog with the HTML page opens, the view of the parent page is completely distorted because of the CSS used in the HTML page (response of AJAX call) which gets applied to all the components. And when I close the Dialog, the parent page gets back into shape.
Is there anyway, by which I can prevent the CSS of the HTML page which is being displayed in dialog, not get applied to my parent page?
Trivial answer: have everything from the page that you pull in be wrapped in a div with a class not used elsewhere. modify the .css for that page so that it only applies to elements within a div of that class.
Edit: If you cannot control the css of the origin page, things become somewhat more complicated. your problem, though, is that you're injecting the HTML (including the css link) directly into your page. Instead, try the following:
Grab the HTML for the other page. Place it into a div off to the side that you're not using for anything else using the html() command.
Go into that div using the jquery DOM commands. Grab the portion of the page inside of the troublesome links, and pull it over to the $('#previewDialog') location. Destroy the contents of the working space div. If there is javascript or css that you need to preserve, have it entered (modified, if necessary - like with div wrappers) elsewhere in the page.
Now, this only works if the pages that you're being fed don't have their css or javascript changing with any frequency.
An alternate version of the same thing - while you have it as a response (a string format) use string manipulation tools to excise the css reference, rather than using DOM commands to pull what you need out of it.
More complicated/difficult version of the same thing (though somewhat more robust): Use string commands to slice out the css references (as with the alternate version) and then make another call using that css reference to acquire the .css file. Use string commands on the .css file to add in the div-wrapper limits as initially described, then insert it elsewhere on the page as an internal style sheet.

Apply scripts and styles to iFrame?

I'm trying to create a small editor for a website. One of the features is a drag and drop interface. I'd like for the user to be able to drag elements to another position in the page. I was thinking of having an iFrame of the site, and applying JS and CSS to enable drag and drop ability.
Here's a screenshot of a CMS that does that:
The site is an iFrame. When I open the iFrame, you can't drag and drop elements. So, I'm assuming that they somehow apply changes in the parent page. Is there any way that I can basically add Javascript into the iFrame?
Thanks!
As long as the page that the iframe references is on the same domain, yes, you can. You can apply scripting and styling on elements within your iframe just like you'd do to any element in your main parent page. The main syntax is this:
var ifrm = document.getElementById("your_iframe_id");
/*ifrm.contentWindow.document is the document within the iframe
so let's try styling a div with an id 'mydiv' inside the iframe:*/
ifrm.contentWindow.document.getElementById("mydiv").style.color = "red";
Of course this is just a sample, you can use the same mechanism to do more complex stuff with elements within the iframe (including drag and drop!)
You could, as well, execute functions that are defined within the iframe from the parent page. The syntax is similar and intuitive:
ifrm.contentWindow.yourFunction();
I hope that helped you in any manner!

replace style with jquery on div within iframe crossdomain

I've an iframe with code that looks like this:
iframe#someID
html
head
body
first div
iframe points to file on the other domain. I want to replace styling of the div, effectively putting background-color:transparent; instead of color it already has.
Is this possible?
No, cross-site-manipulation is fortunately not possible.
To change the contents of an iframe on the same domain, however, have a look at this: http://api.jquery.com/contents/#example-1

Categories