Is it possible to alter the CSS of an HTML page dynamically from within an iFrame on a separate webpage?

I have a website that uses jQuery UI themes. On this site, there is an iFrame containing another HTML document also utilizing jQuery UI themes. I have created my own theme selector and now want to know the simplest way to apply this selection to the content within the iFrame. For instance, when a user chooses a new theme, I can simply do this:

<link id="uiTheme" rel="stylesheet" type="text/css" href="ui/smoothness.css" />
$("#uiTheme").attr("href", "ui/" + newTheme + ".css");

Here, newTheme represents the name of a different theme provided through a select box. My question is: How can I use a jQuery selector to target the link with the id innerTheme in order to change its href attribute to match the stylesheet used on the main page? Do I need to specifically address this, or will the outer page's theme automatically be applied to the iFrame content without the iframe itself linking to a stylesheet?

If my explanation is unclear, I apologize. I am happy to clarify any points if necessary.

jquerycssinheritanceiframestylesheet

Answer №1

No need to grab a reference to their link element - simply insert your own and it will take precedence.

var customLink = document.createElement('link');
customLink.href = "http://full.domain.com/ui/smoothness.css";
customLink.type = 'text/css';
customLink.rel = 'stylesheet';
$('head', frameName )[0].appendChild(customLink);

Keep in mind, if the content is from a different domain, you won't be able to modify anything in that other frame. If it's from the same domain, it might be easier to make the change on the original page. Unfortunately, if it's from another site, there's no workaround.

Answer №2

If you're looking to manipulate iframe stylesheets, this code snippet might be of some assistance: It iterates through the iframe stylesheets, toggling them on and off.

javascript: var i=0;
for(var j=0;j < window.frames.length;j++){
  cs=!window.frames[j].document.styleSheets[0].disabled;
  for(i=0;i<window.frames[j].document.styleSheets.length;i++) 
    window.frames[j].document.styleSheets[i].disabled=cs;
};
void(cs=true);

This piece of code is inspired by the Bookmarklet used to switch CSS on/off, available here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Optimizing Container size for devices with smaller screens

After creating a container with a panel and a panel body, everything looked fine when viewed on desktop. However, upon checking it on my phone, I noticed a large space on the right with nothing there. If you'd like to see an image of the issue, click ...

htmlcsstwitter-bootstrap

Tips on extracting json information from Dataset by utilizing JsonConvert's SerializeObject function

Utilizing a WCF service to retrieve and send data from a database using jQuery AJAX has been challenging. Despite multiple attempts, parsing JSON data remains problematic. WCF Service: [ServiceContract] public interface IService { [OperationContract] ...

jqueryasp.netjsonajaxwcf

Using JQuery to handle various input fields, forms, and submission actions

I have multiple forms displayed as rows within a table. At the end of each row, there is a submit button. Upon clicking this button, my JQuery function generates two text boxes and another submit button dynamically. My goal is to capture POST variables fro ...

phpjqueryajaxforms

The functionality of Google Map APIs is not compatible with Angular views

I'm currently attempting to utilize Google Maps APIs to create a basic autocomplete feature for a "Place" input box within an Angular routing setup. Following Google's developer instructions, in the <head> of my main template, I've in ...

javascriptjqueryangularjsgoogle-mapsautocomplete

strange SQL issue and JavaScript AJAX problem

In my database, there is a basic table setup as follows: $start = //correct $end = //correct $query = ' SELECT id, title, start_in, duration, color, DATE_ADD( start_in , INTERVAL (duration*60) MINUTE ) AS end_in FROM shifts ...

phpjavascriptjquerymysqlajax

Customize Font Size for Subcategories in Woocommerce

I recently created a subcategory in my Woocommerce store and now I want to emphasize it by displaying the subcategory in bold with a larger font size. I want it to stand out from the other product categories. The specific page I am referring to is located ...

csswordpresswoocommercefont-size

The JS variable text consistently displays as undefined

I have come across multiple posts on this topic, but none of them seem to be getting through to me or they are slightly different. This issue has been causing me confusion for quite some time. Despite my efforts to find a solution, I am met with conflicti ...

javascriptjqueryforms

Creating a basic live data visualization chart

Can anyone help me with fetching data from the database and plotting it into a real-time graph? I found an example here: The JSON structure is as follows: "networks": { "eth0": { "rx_bytes": 5338, "rx_dropped": 0, "rx_err ...

javascriptjqueryajax

Creating an HTML and CSS Dropdown Navigation Menu with Mouse-over Functionality

Is it possible to create a mouse-over dropdown menu using CSS and HTML? I have noticed websites like Google that have implemented such menus, where passing through triggers a hidden tag to become visible. Can anyone provide source code for this idea? Than ...

javascripthtmlcssajax

"The Django querydict receives extra empty brackets '[]' when using jQuery ajax post to append items to a list in the app

Currently, I am tackling a project in Django where I am utilizing Jquery's ajax method to send a post request. The csrftoken is obtained from the browser's cookie using JavaScript. $.ajax({ type : 'POST', beforeSend: funct ...

javascriptjquerypythonajaxdjango

Having trouble copying an iframe from one div to another div?

I'm having trouble transferring an iframe to another div. Here is the code I am using: <script type="text/javascript"> $(document).ready(function () { setInterval(function () { if ($('#d1').html() != $('#d ...

javascriptjqueryasp.net

Padding will not completely fill the <li> and <div> elements

Looking to create a sleek menu bar that's 40px tall and fills up 80% of the browser width. The challenge arises when trying to center the text within the menu items. Despite adjusting padding for alignment, there's still a small gap because of & ...

htmlcsshtml-listspadding

Editing XHTML on the fly

Is there a tool available for non-technical individuals to edit hard-coded content in XHTML? I am interested in a solution similar to the integration of Pagelime with jEditable. Currently, my website is static and I am seeking a way for one person to log ...

javascriptjqueryxhtml

My jQuery carousel seems to be malfunctioning. Check out the issue here on JSFiddle

I found this amazing resource for jQuery carousel functionality: If you'd like to see it in action, check out the JSFiddle demo I created: http://jsfiddle.net/svQpc/ However, I've encountered a small issue with the Horizontal version of the car ...

jqueryhtmlcss

Using a jQuery if statement to target a particular div and apply custom CSS styling

I have encountered a unique challenge that I am struggling to solve. Imagine I have a 3x3 table created using div elements, and one of the cells has a background color of #999. My goal is to use jQuery to check if a specific cell has this background color, ...

htmljquerycss

AdminLTE-3 Bootstrap-4 sidebar menu with dynamic AJAX functionality fails to toggle treeview open/hide after page is fully loaded

I am looking to update the sidebar menu dynamically in the adminlte 3 dashboard with bootstrap 4 using AJAX calls. However, I have run into an issue where the menu open/close functionality is not working when the data is loaded dynamically using AJAX. On t ...

javascriptjqueryajaxbootstrap-4adminlte

Protecting against CSRF and XSS attacks in Single page applications can be achieved without relying on cookies

We have a unique setup on our mobile website where it functions as a single page application using cfmanifest to load cache. However, we are facing an issue after login when users navigate between 5 to 10 pages and need to submit confidential data through ...

javascriptjqueryhtmlxsscsrf

delete local ios css style datetime input

I am facing an issue with the new ios 16 version in Safari where input time and input datetime are being displayed incorrectly. Is there a way to fix this problem? I have tried using -webkit-appearance: none; but it did not work. https://i.sstatic.net/em ...

htmlcsssafariios16

In Javascript, the color can be changed by clicking on an object, and the color

Looking for help with my current HTML code: <li><a href="index.php" id="1" onclick="document.getElementById('1').style.background = '#8B4513';">Weblog</a></li> The color changes while clicking, but when the lin ...

javascriptcsscolorsbackground-color

What is preventing me from applying a jQuery function to an ng-click event in AngularJS?

Seeking clarity on why I am receiving the result of undefined when attempting to construct an ng-click call to a method using a jQuery function. Here's a specific example: <a href="#" class="btn btn-default" ng-click="angularMethod($('input[ ...

javascriptjqueryangularjs