'How to load iframe's parent page css and script?

How to load iframe's parent page css and script?

I want to load the script and css of the index.html file into an iframe.

There is an iframe tag in the index.html file.

index.html

<head>
  <link rel="stylesheet" href="css/common/common.css">
  <script src="js/common/jquery-3.6.0.min.js"></script>
</head>

iframe.html

<head>
    ( I want to load the CSS and scripts in the head tag of the index.html file. )
</head>
javascripthtml


Solution 1:[1]

You can "inherit" the CSS of the parent by having such code in the iframe:

<head>
<script type="text/javascript">
window.onload = function() {
    if (parent) {
        var oHead = document.getElementsByTagName("head")[0];
        var arrStyleSheets = parent.document.getElementsByTagName("style");
        for (var i = 0; i < arrStyleSheets.length; i++)
            oHead.appendChild(arrStyleSheets[i].cloneNode(true));
    }
}
</script>
</head>

From Javacript function calling:-

<button type="button" onclick="parent.MyFunc();">Click please</button>

Solution 2:[2]

  <link rel="script" href="index.html">

have you tried this?

And always try to use script in app.js and only text in index.html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amit Soni
Solution 2 Pratik Kabade

Related Questions