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

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>

CodePudding user response：

  <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

CodePudding user response：

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>