How can I inject css into iframe content without using javascript or jquery.
Without direct access to the child page, you cannot modify its style. If you can, you can modify the style like any other page. Only the iframe tag itself can be subjected to styling without any javascript.
For styling with javascript see here.
Related
I have an iframe, and I want to set the style inside attribute srcdoc using only CSS.
<iframe name="myFrame" srcdoc="<span>Hi</span>"> </iframe>
Is it possible to set the style of span inside srcdoc without using inline style but only style sheet?
If not, I can only put the whole html coding inside srcdoc to change the style?
CSS styles of an iframe are independent from main page appearance. And it is not possible to manipulate externally its design.
Relating to srcdoc attribute, I do not understand what you want. About it, MDN says: "This attribute is expected to generally be used together with the sandbox attribute".
You could try to do it with Javascript by changing the attribute. I am not sure if that is a possible solution for you. But if it is, create a function that can dynamically change the attribute to whatever you want. That way you don't have add it statically inline.
I will give you an quick example below.
document.getElementsByTagName("iframe")[0].setAttribute("srcdoc", "demoValue");
And to change the style of the inner span all you have to do is assign it an id. And make a rule in your CSS, this will alow you to manipulate it both in Js and CSS.
If the iframe is not in the same domain you will not be able to modify the content client side. You will have to read the page using PHP and echo it from your domain.
I use Iframe in page. This Iframe loads HTML file. I want to stylize this Iframe from is loaded HTML. Is it possible?
<iframe style="width:600px;height:525px;border:0;position:absolute;right:0;bottom:30px;" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="widget.html"></iframe>
Can I move styles to widget.html?
If those styles are working, you can simplify it a bit by moving the current in-line styles to a stylesheet or move them to <style> tags on the html page itself and only call one class like class="iframestyle"
As far as what styles you can manipulate iFrames with, here is an article you might want to read: How to style iFrames - Styling iFrames with CSS
I have a html page and i insert a iframe in this page.
I have a problem with iframe contants. In iframe show a button which have link to go on website anywhere, i want to that button does not show how set in CSS
{display: none}
but how in iframe button no detect any css rule for displaying none.
Help me CSS MASTERS
You must use seamless attribute:
This Boolean attribute indicates that the browser should render the
inline frame in a way that makes it appear to be part of the
containing document, for example by applying CSS styles that apply to
the <iframe> to the contained document before styles specified in that
document, and by opening links in the contained documents in the
parent browsing context (unless another setting prevents this). In
XHTML, attribute minimization is forbidden, and the seamless attribute
must be defined as <iframe seamless="seamless">.
The problem is that browser support is currently negligible. Meanwhile, you can watch Seamless iframes. The future, today!, a slideshow which can give you some ideas of how to implement those functionalities.
Sorry if this is obvious but I just don't know what more to do.
I am using fancybox jQuery plugin to load html content into a modal, but the content doesn't show the css styles of the main document.
CSS rules are called in the main document AND inside the loaded html in a <style> tag, but nothing.
How can I fix this without having to apply individually each element's css with jQuery .css() calls?
Thank you
Note: I know this may be over-duplicated, but I still haven't found the right solution.
Edit: Ajax-loaded content is inside an iframe
Since, as you mention in the comments, you're actually loading content into an iframe, this loaded content will not be affected by styles in the container document. They're two distinct HTML pages, despite the illusion created by the iframe.
Your best bet is to configure the content you're loading to use the same set of styles and style sheets as the container document, or a subset thereof. Treat it like just another HTML page on your site.
I'm having problems with the content loaded with AJAX inside a DIV.
I need custom CSS for the loaded content, but using <style> tag inside the div (or anywhere outside the <head>) does not respect the W3C standards.
Even more, in IE8 using <style> inside the div is not working as expected.
How can we solve this situation?
You could have the AJAX response modify the the contents of the <head> tag and add a new style tag. Your response would have two parts to it, the HTML and the CSS. The CSS should be added to the document before the HTML to ensure it is used.
Check out this post for adding CSS to the head: i prepend the css to the end of head tag
I'm assuming you have already been able to load something with AJAX into your page. Just convert your response to a JSON response with two parts, the CSS and the HTML. The JSON Spec might help too. You will need to escape any HTML or CSS that you send as a response.