How to make iframe use css and javascript from the parent page?

Question

I am developing a portal using mvc5, on that portal I have a page that has an iframe elements such:

<div class="tab-pane fade in active" id="mgArea">
    <iframe id="iframeMgMap" src="@(string.Format("../../mapData/infoMarko/?WEBLAYOUT={0}",Model.MgPath))"
                    frameborder="0"
                    scrolling="no"
                    style="width:100%;height:100%;">
    </iframe>
</div>

The portal and the Iframe's content is on the same IIS and runs on the same pool.

I added some css styles in the portal (like bootstrap.css, etc.) and some javascript libraries and plugins (like bootstrap.js and jquery).

My question - is it possible to make iframe use the same css styles and javascript libraries and plugins from it's parent page?

Possible duplicate of [Iframe inherit from parent](http://stackoverflow.com/questions/4612374/iframe-inherit-from-parent) — Mhd Alaa Alhaj, May 08 '17 at 10:04

score 1 · Answer 1 · answered May 08 '17 at 10:05

1

My first question would be why you use an iframe. If you trust the code inside the iframe and you want to inherit css and js from the parent, why not use a normal div or other html element?

However, if you still have good reasons to use the iframe, you can access the parent by using window.parent.

answered May 08 '17 at 10:05

Sventies

2,314
1
28
44

Because I have to separate projects running on IIS.Is it possible to use enother HTML element in my case? – Michael May 08 '17 at 10:11

Alessandro · Answer 2 · 2017-05-08T10:43:26.903

You could include the "inner page" using the html link tag.

The tag defines a link between a document and an external resource.

See following example:

File test.html:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Test</title>
        <link rel="import" href="test2.html">
    </head>
    <body>
        <p>Main page</p>
        <p id="innerpage"></p>
    </body>
</html>
<script>
    var content = document.querySelector('link[rel="import"]').import;
    console.log(content);
    var inner = document.getElementById("innerpage");
    inner.append(content.body)
</script>

File test2.html:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Test 2</title>
    </head>
    <body>
        <p>Test 2 page</p>
    </body>
</html>

I can't make a fiddle cause the CORS limitation, anyway I've uploaded a working example here.

I hope it helps you, bye.

How to make iframe use css and javascript from the parent page?

2 Answers2