How can I control the background image and colour of a body element within an iframe? Note, the embedded body element has a class, and the iframe is of a page that is part of my site.
The reason I need this is that my site has a black background assigned to the body, and then a white background assigned to divs that contain text. A WYSIWYG editor uses an iframe to embed content when editing, but it doesn't include the div, so the text is very hard to read.
The body of the iframe when in the editor has a class that isn't used anywhere else, so I'm assuming this was put there so problems like this could be solved. However, when I apply styles to class.body they don't override the styles applied to body. The weird thing is that the styles do appear in Firebug, so I've no idea what's going on!
Thanks
UPDATE - I've tried #mikeq's solution of adding a style to the class that is the body's class. This doesn't work when added to the main page's stylesheet, but it does work when added with Firebug. I'm assuming this is because Firebug is applied to all elements on the page whereas the CSS is not applied within iframes. Does this mean that adding the css after window load with JavaScript would work?
The below only works if the iframe content is from the same parent domain.
The following code works for me. Tested on Chrome and IE8. The inner iframe references a page that is on the same domain as the parent page.
In this particular case, I am hiding an element with a specific class in the inner iframe.
Basically, you just append a style element to the head section of the document loaded in a frame:
frame.addEventListener("load", ev => {
const new_style_element = document.createElement("style");
new_style_element.textContent = ".my-class { display: none; }"
ev.target.contentDocument.head.appendChild(new_style_element);
});
You can also instead of style use a link element, for referencing a stylesheet resource.
An iframe is a 'hole' in your page that displays another web page inside of it. The contents of the iframe is not in any shape or form part of your parent page.
As others have stated, your options are:
give the file that is being loaded in the iframe the necessary CSS
if the file in the iframe is from the same domain as your parent, then you can access the DOM of the document in the iframe from the parent.
You cannot change the style of a page displayed in an iframe unless you have direct access and therefore ownership of the source html and/or css files.
This is to stop XSS (Cross Site Scripting)
This code uses vanilla JavaScript. It creates a new <style> element. It sets the text content of that element to be a string containing the new CSS. And it appends that element directly to the iframe document's head.
Keep in mind, however, that accessing elements of a document loaded from another origin is not permitted (for security reasons) -- contentDocument of the iframe element will evaluate to null when attempted from the browsing context of the page embedding the frame.
var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
'body {' +
' background-color: some-color;' +
' background-image: some-image;' +
'}'
;
iframe.contentDocument.head.appendChild(style);
Override another domain iframe CSS
By using part of SimpleSam5's answer, I achieved this with a few of Tawk's chat iframes (their customization interface is fine but I needed further customizations).
In this particular iframe that shows up on mobile devices, I needed to hide the default icon and place one of my background images. I did the following:
Tawk_API.onLoad = function() {
// without a specific API, you may try a similar load function
// perhaps with a setTimeout to ensure the iframe's content is fully loaded
$('#mtawkchat-minified-iframe-element').
contents().find("head").append(
$("<style type='text/css'>"+
"#tawkchat-status-text-container {"+
"background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+
"background-size: 100%;"+
"} "+
"#tawkchat-status-icon {display:none} </style>")
);
};
I do not own any Tawk's domain and this worked for me, thus you may do this even if it's not from the same parent domain (despite Jeremy Becker's comment on Sam's answer).
An iframe has another scope, so you can't access it to style or to change its content with javascript.
It's basically "another page".
The only thing you can do is to edit its own CSS, because with your global CSS you can't do anything.
This should work with cross domain if you're the owner of the both
The trick here is to assign a global css variable to your body, to listen message with the new color, and then to change the global css variable once receive a message.
I'm using angular, but it should work with pure javascript
My use case was to show to the user what he how the color change would impact his website in the iframe before saving it
Domain A
#ViewChildren('iframeContainer') iframeContainer: QueryList<ElementRef>
sendDataToIframe(
data = {
type: 'colorChange',
colors: {primary: '#000', secondary: '#fff'},
},
): void {
if (this.targetUrl)
this.iframeContainer.first.nativeElement.contentWindow.postMessage(data) // You may use document.getElementById('iframeContainer') instead
}
Domain B
acceptedEditOrigins = [
'https://my.origine.ccom', // Be sur to have a correct origin, to avoid xss injecto: https://en.wikipedia.org/wiki/Cross-site_scripting
]
constructor() {
// Listen to message
window.addEventListener('message', (event) => this.receiveMessage(event), false)
}
receiveMessage(event: MessageEvent) {
if (this.acceptedEditOrigins.includes(event.origin))
switch (event.data.type) {
case 'colorChange': {
this.setWebsiteConfigColor(event.data.colors)
}
}
}
setWebsiteConfigColor(colors: WebsiteConfigColors) {
if (colors) {
const root = document.documentElement
for (const [key, value] of Object.entries(colors)) {
root.style.setProperty(`--${key}`, value) // --primary: #000, --secondary: #fff
}
}
}
body {
background-color: var(--primary);
}
If you have control of the page hosting the iframe and the page of the iframe, you can pass a query parameter to the iframe...
Here's an example to add a class to the iframe based on whether or not the hosting site is mobile...
Adding iFrame:
var isMobile=$("mobile").length; //detect if page is mobile
var iFrameUrl ="https://myiframesite/?isMobile=" + isMobile;
$(body).append("<div id='wrapper'><iframe src=''></iframe></div>");
$("#wrapper iframe").attr("src", iFrameUrl );
Inside iFrame:
//add mobile class if needed
var url = new URL(window.location.href);
var isMobile = url.searchParams.get("isMobile");
if(isMobile == "1") {
$("body").addClass("mobile");
}
For juste one iframe, you can do something like this:
document.querySelector('iframe').contentDocument.body.style.backgroundColor = '#1e1e2d';
In case you have multiple iframe you're dealing with:
document.querySelectorAll('iframe').forEach((iframe) => {
iframe.contentDocument.body.style.backgroundColor = '#1e1e2d';
});
Perhaps it's changed now, but I have used a separate stylesheet with this element:
.feedEkList iframe
{
max-width: 435px!important;
width: 435px!important;
height: 320px!important;
}
to successfully style embedded youtube iframes...see the blog posts on this page.
give the body of your iframe page an ID (or class if you wish)
<html>
<head></head>
<body id="myId">
</body>
</html>
then, also within the iframe's page, assign a background to that in CSS
#myId {
background-color: white;
}
Related
We have many animations generated by Google webdesigner which popups when user click on some td element.
I've found that the only way to add these animations is have a iframe, so we have a fixed iframe where we update src with these animations
Edit.cshtml:
<iframe id="popUpFrame"></iframe>
<script src="~/js/popUp/popUp.js"></script>
On end of this file we have several "apps" created by Google webdesigner (generated to html file)
Element with id 01 is td element which listen on click
// PopUps
let frame_elem = document.getElementById("popUpFrame")
//speedtest popup-01
let speedtest_elem = document.getElementById("01")
hoPopUp(frame_elem, speedtest_elem, "505px", "505px", "/images/PopUps/01.html")
popup.js file:
function hoPopUp(frame_elem, td_elem, width, height, file_path){
frame_elem.style.width = width
frame_elem.style.height = height
frame_elem.style.top = "50%"
frame_elem.style.left = "50%"
td_elem.addEventListener("click", function () { showIframe(frame_elem, file_path) })
td_elem.addEventListener("mouseout", function () { hideIframe(frame_elem) })
}
function showIframe(frame_elem, file_path) {
frame_elem.setAttribute("src", file_path)
frame_elem.classList.add("active")
}
function hideIframe(frame_elem){
frame_elem.classList.remove('active')
frame_elem.removeAttribute('src')
}
The google webdesigner html file is full of javascript code, but I dont know how to allow it. We've found out that Add blocker is blocking it so we create detection of add blocker by sending some fetch request to some add, but my colleague is using uBlocker where the detection mechanism is not working.
Question is, how to allow running the javascript inside the iframe. Why are the browser tools blocking javascript "downloaded" from my own website?
Thank you for help
uBlocker is doing some "cosmetic filtering", so add detection by sending some javascript fetch Request doesnt work...
Instead of trying detect browser's tool, we put a note to every webdesigner generated html code:
<body>
<div style="width: 100%; position:absolute; top:50%;">
<p style="display:flex; justify-content:center;">
Please disable add blocker and content filters on this site
</p>
</div>
If the javascript is allowed to run inside the iframe with the webdesigner html code, the animation will be over this note
This is basically the opposite of this question - CSS override body style for content in iframe?
I have a CMS that provides data to a vendor CMS that is actually housed on the same server/domain.
The CMS is also used as a stand-alone. So what we want to do is strip all of our headers, menus, and footers when displayed in the LMS.
So is there CSS I can use on my side that will only be used when the site is in an iframe?
I believe you have to use javascript. Taken from How to identify if a webpage is being loaded inside an iframe or directly into the browser window?
function inIframe () {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
if(inIframe()){
// Change css
}
I managed to change an iframe's src with javascript
var path='images/tattoo/fullsize/';
var h=$('#borderlessFrame').height();
var bigFrame=$('#borderlessFrame');
function loadGallery(num)
{
bigFrame=$('#borderlessFrame');
var galPath=path + num; // path to the image
h=$('#borderlessFrame').height();
var source=bigFrame.attr('src');
source='i load some address here';
}
But for now i see the old content of the iframe , is there a way to reload the iframe ( only iframe not the whole page)
The thing i am trying to achieve is a simple gallery , thumb pictures on the bottom and a large picture on the top ( iframe ). On click on any of the thumbs , i change the content of the iframe without reloading the actual page.
Keep in mind that i am new to html/javascript/jquery.
So basically i need a way(function?) to reload the iframe.
To set attribute, you need to call .attr( attributeName, value )
Try this:
var source='i load some address here';
bigFrame.attr('src', source);
Reference:
jQuery .attr()
jQuery has the load method, which is useable like so (assuming borderlessFrame is the id of the <iframe>):
var iFrame = $('#borderlessFrame');
iFrame.load('http://theurltoload.com')
However, iframes seem like an unnecessary approach for your requirements, consider looking into CSS and the jQuery DOM manipulation methods a little more.
I have a javascript that is loaded in the document head that needs to hide the document body until all page contents have loaded. I have tried:
$(document.body).hide();
But there still appears to be a flicker in some browsers. I am using the latest jQuery library (1.6.2). Firing the event on domready does hide the document body, but causing a flicker as well.
All that I can control is what is in the javascript. I cannot manipulate the static html pages as the script is being developed as a plugin.
Hiding content until the page is loaded is an anti-usability feature. Some parts of the content may take while to load, meanwhile your visitors see nothing. Browsers render content as it is received because users chose that as the preferred model in the very begining.
If you persist with this approach, you must hide the content using script. Otherwise, users with javascript disabled or not available, or where the script fails to execute correctly, will never see the content.
The simplest way to hide content using script is to use document.write to create a style sheet, then remove it to show the content:
document.write( '<style class="hideStuff" ' +
'type="text/css">body {display:none;}<\/style>');
window.onload = function() {
setTimeout(
function(){
var s, styles = document.getElementsByTagName('style');
var i = styles.length;
while (i--) {
s = styles[i];
if (s.className == 'hideStuff') {
s.parentNode.removeChild(s);
return;
}
}
}, 1000); // debug pause
}
The best way to do this is to put all content in a container div and have a style sheet that hides it by default. You can then show the content once everything is loaded. There is no way to run Javascript before the default page content renders so the only way to start out hidden is with a statically defined CSS rule:
HTML:
<body>
<div id="container">
all dynamic page content goes here
</div>
</body>
CSS in a stylesheet with the page to make it initially not visible:
#container {display: none;}
And, then you can do whatever you want with javascript and when you're done building the page, you do this to make it visible:
document.getElementById("container").style.display = "block";
or in jQuery:
$("#container").show();
You can use CSS and JS:
In the top of your document, below the TITLE use CSS:
<style type="text/css">body {visibility: hidden;}</style>
And after this use JS to restore the visibility:
<script type="text/JavaScript">
document.write('<style type="text/css">body {visibility: visible;}</style>');
</script>
Enjoy :)
I am inserting content into the LMS (learning management system) Desire2Learn and wish to implement the jquery lightbox clone colorbox.
The LMS uses a variety of frames and only allows for html content to be placed in a designated 'content' frame. I would like to use javascript to sent 3 include files to the top level of the DOM from the bottom level.
I have previously attempted the following with no success:
<script type="text/javascript">
/* locate the parent frame */
var par = parent;
while (par !== par.parent) {
par = par.parent;
}
/* inject the css and scripts in the top frame */
var scr = par.document.createElement('script');
scr.setAttribute('type','text/javascript');
scr.setAttribute('src','jquery-1.4.3.min.js');
par.document.head.appendChild(scr);
var lnk = par.document.createElement('link');
lnk.setAttribute('type','text/css');
lnk.setAttribute('rel','stylesheet');
lnk.setAttribute('href','colorbox.css');
par.document.head.appendChild(lnk);
var scr = par.document.createElement('script');
scr.setAttribute('type','text/javascript');
scr.setAttribute('src','jquery.colorbox-min.js');
par.document.head.appendChild(scr);
</script>
Am i at all heading in the right direction or is there simply no way do what i am asking?
The code works for me, except that the colorbox JS is loaded before JQuery, and hence a call to JQuery fails. I put the last script element writing inside a setTimeout and it got rid of that error. To verify it had loaded fully in the parent frame, I put in the console:
$(document).ready(function() { alert('hi'); });
and it popped the alert.
If you're trying to get anchors to open the lightbox from the inner frame to the outer one, it might be easier to alter the colorbox code to target the top-level frame rather than try to work outward-in.