Implementing styles on the parent document through the child document

Question

Implementing styles on the parent document through the child document

Currently, I am working on a chat widget application script and my goal is to apply styles to the parent document's body from the child document (the chat widget application).

So far, I have attempted to access the parent document using the window object, but it only gives me access to the child document.

https://i.sstatic.net/J3ebA.png

When trying to access the frameElement, it returns null. https://i.sstatic.net/XTVHR.png

I also experimented with accessing the parent document through window.parent, however, it did not provide access to the parent document - https://i.sstatic.net/83Ygr.png

Even when attempting to use window.top, the parent document remains inaccessible. https://i.sstatic.net/mW82i.png

javascript html css angular dom

Answer 1

Answer №1

The solution is not as straightforward as you may think: it's simply not possible to achieve directly. However, there is a workaround that involves using a script. For example, within the child page's code, you could incorporate something similar to the following:

var frameElement = window.parent;
if (frameElement) {
    var styleSheet = document.createElement('link');
    styleSheet.rel = 'stylesheet';
    styleSheet.type = 'text/css';   
    styleSheet.href = "http://....";
    frameElement.document.getElementsByTagName('head')[0].appendChild(styleSheet);
}

Answer 2

The solution is not as straightforward as you may think: it's simply not possible to achieve directly. However, there is a workaround that involves using a script. For example, within the child page's code, you could incorporate something similar to the following:

var frameElement = window.parent;
if (frameElement) {
    var styleSheet = document.createElement('link');
    styleSheet.rel = 'stylesheet';
    styleSheet.type = 'text/css';   
    styleSheet.href = "http://....";
    frameElement.document.getElementsByTagName('head')[0].appendChild(styleSheet);
}

Implementing styles on the parent document through the child document

Answer №1

Similar questions

Tips for updating the class name of a specific div element during runtime

Foundation Framework sidebar by Zurb

Combining labels over multiple lines using lower division

Is there a way to execute a function only once when the submit button is clicked in a jQuery AJAX form?

I keep receiving an error in Angular JS but I'm unsure of the reason

Mastering the art of Interpolation and Binding in Ionic 3/Angular 4: A step-by-step

Press the jQuery button and inform me once it has been activated

ways to interpret a string input within the <input class> class using selenium in C#

I must remove the thumb from the input range control

AngularJS is receiving an array of null inputs

Is it possible for me to input a variable into the logical process of if(isset($_FILES['whatever']))?

What causes AngularJS to generate an error when attempting to construct a URL for the src attribute of an iframe?

Utilizing Pseudo Classes in Custom Styled Components with MUI

Angular's counterpart to IWebProxy

Tips for revealing the pin after entering it into the text box

Creating a unique pattern in HTML5 to properly format phone numbers

Creating a responsive layout with Bootstrap4 to show two rows of three columns on smaller screens

Using `getElementById` within the Vue.js `mounted` lifecycle hook can sometimes return null

Integrate a PHP link into a Gatsby/React project

Is the HTML templating mechanism compatible with Angular?