Question

我有一个问题，我搜索但尚未找到答案。

我需要在html页面中嵌入html页面的内容。我基本上想要iframe功能而不使用单独的页面而只是内容本身。我还需要母版样式表不会影响同一页面中的子样式表。

所以它将如下所示，我需要magic_tag

<body style=1> mother page

<magic_tag><body style=2> child page content </body></magic_tag> </body>

我想知道这是否可能，或者我想要一些不可能的东西

Answer 1

你接近这个错误的方法，试试这个 - ＆gt;

不要在子“page”中给任何与父“page”相同的类或id

http://jsfiddle.net/8pFMe/6/

<body>
    <div class="container">
        <div class="nav">
            <ul>
                <li>Home </li>
                <li> Link </li>
                <li> Link2 </li>
                <li> Link3 </li>
            </ul>
        </div>
        <div class="wrapper">
            <div class="sidebar">
                <ul>
                    <li>Sidebar Stuff</li>
                    <li>Link</li>
                    <li>Link2</li>
                    <li>Link3</li>
                </ul>
            </div>
            <div class="body">

                <div class="second-page">
                    <div class="second-container">
                         <div class="second-nav">
                            <ul>
                                <li>Home</li>
                                <li>Link</li>
                                <li>Link2</li>
                                <li>Link3</li>
                            </ul>
                        </div>
                        <div class="second-wrapper">
                            <div class="second-sidebar">
                                <ul>
                                    <li>Sidebar Stuff</li>
                                    <li>Link</li>
                                    <li>Link2</li>
                                    <li>Link3</li>
                                </ul>
                            </div>
                        </div>
                        <div class="second-body">
                            <p> This looks similar to an iframe, but it's not an iframe.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

的CSS：

.container{
    width:500px;
    margin:0 auto;
}

.nav li, .second-nav li{
    display:inline;
    list-style:none;
    padding:0 5px;
}

.sidebar{
    float:left;
    width:150px;
}

.body{
    width:340px;
    float:left;
    padding 5px
}

.second-page{
    border:1px solid #999;
    padding:10px;
}

Answer 2

您很有可能应该仍然使用iframe-最有可能的是，您与主管之间存在沟通问题。也许他们的学位是管理方面的知识，或者是CS的知识，但是他们对JavaScript的了解并不多。也许他们甚至都不知道iframe是什么。那是最有可能的，这就是为什么你把所有这些都否决了。很难理解理智的人（那里没有沟通问题的人）真的想要做类似“ iframe做的事情- ，嵌入页面-，但不使用iframe”。而且您是表示要“ 嵌入页面”，对吗？因此，使用iframe，就可以了。我可以说，为了“执行iframe的工作，但不使用它”，请使用svg标签，然后在其中使用foreignObject标签，这有点像{ {1}}。但是，再次，这似乎不是您真正想要的。

但是你值得怀疑。也许我错了，您真的应该使用“复制和粘贴”来嵌入页面-这比iframe还要更多。知道的原因可能是您的页面在嵌入式页面出现故障或更改时保持不变。

在这种情况下，通过将要嵌入的主体从外部页面的HTML复制到自己的页面的HTML中，您的确在HTML中获得了“主体在主体中”。（您还必须复制一些但不是全部的JavaScript和一些但不是全部的CSS，所有这些都需要花费相当长的时间。）

“身体内的身体”很可能不是“结构良好的”，但可以忽略这一点，因为浏览器（必须向后兼容）在运行时非常强大到非“格式良好”的状态。

然后，当您要确保将外部CSS应用于嵌入部分而页面的CSS不适用时，“ body in body”怪癖可能只是变相的祝福。也就是说，您可以在复制的外部CSS的每个路径之前加上iframe（除非它包含body>body，然后将body替换为body）。然后，为外部主体提供一个肯定不会使用外部页面的类（例如，使用您自己的名称），并在“您的” CSS中的各处body>body之前。这与雅克的建议非常相似。

也许是一个更好的主意（如果确实是外部页面的“创建离线副本”，则是这样）：打开要嵌入到单独窗口/标签中的页面。然后，编写一些JavaScript，使用body.coskan和window.getComputedStyle。 element.style = lorem 以便修改每个dom节点（在您要嵌入的页面部分内），以使其具有渲染样式（计算出的样式）作为内联样式，以便所有CSS都“插入” HTML（或DOM）中。然后，将修改后的HTML插入页面。很可能有人已经编写了这样的“ CSS inline-ifyer”工具。生成的HTML是“丑陋的”，但谁在乎。它可以满足您的要求，并且与“ Jacques方法”相比，此方法要快得多（开发时间），并且嵌入的页面实际上是静态的，与使用ipsum的情况不同。（“静态”表示，如果Oracle更改了页面，则不会影响您的页面。）

再三考虑一下，如果嵌入式页面没有JavaScript，则“更好的主意”实际上仅是/最适合。否则，最好使用“雅克方法”。还有另一种方法（如果确实要嵌入的部分是非交互式的）：进行截屏并包含图像。

但是也许它根本不是“静态”的，实际上您需要与外部页面进行通信（例如查询外部数据库）。然后，我最初的“误传假设”就更有可能了。在这种情况下，为什么在地球上不使用iframe？好吧，您可以执行iframe，然后使用JavaScript剖析结果。这样，它比iframe灵活得多。但是，还有更多工作要做。

身体内部

2 个答案: