如何使iframe从父页面使用CSS和JavaScript？

Question

我正在使用mvc5开发门户，在该门户上，我有一个页面，其中包含iframe元素，例如：

<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>

门户网站和Iframe的内容位于同一IIS上，并在同一池中运行。

我在门户中添加了一些CSS样式（例如bootstrap.css等）以及一些javascript库和插件（例如bootstrap.js和jquery）。

我的问题-是否可以使iframe从其父页面使用相同的CSS样式以及javascript库和插件？

Answer 1

我的第一个问题是为什么要使用iframe。 如果您信任iframe的代码，并且想从父级继承css和js，为什么不使用普通的div或其他html元素呢？

但是，如果仍然有充分的理由使用iframe，则可以使用window.parent访问父级。

Answer 2

您可以使用html链接标签包含“内部页面”。

标签定义文档和外部资源之间的链接。

请参见以下示例：

文件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>

文件test2.html ：

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

无论如何，我都无法在CORS限制中摆弄任何东西。

希望对您有帮助，再见。

如何使iframe从父页面使用CSS和JavaScript？

问题描述

2 个解决方案

解决方案1
1 2017-05-08 10:05:20

解决方案2
1 2017-05-08 10:35:54

如何使iframe从父页面使用CSS和JavaScript？

问题描述

2 个解决方案

解决方案1 1 2017-05-08 10:05:20

解决方案2 1 2017-05-08 10:35:54

解决方案1
1 2017-05-08 10:05:20

解决方案2
1 2017-05-08 10:35:54