-3

我有一个问题，我搜索了但还没有找到答案。

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

所以它会像下面一样，我需要magic_tag

<body style=1> mother page

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

我想知道这是可能的还是我想要一些不可能的事情

4

2 回答 2

3

你以错误的方式接近这个，试试这个->

不要给子“页面”中的任何内容提供与父“页面”相同的类或 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;
}
于 2013-08-01T19:45:02.577 回答
1

最有可能的是，无论如何您都应该使用iframes - 最有可能的是，您与主管的沟通有问题。也许他们的学位是管理方面的，或者是 CS，但他们对 JavaScript 了解不多。也许他们甚至不知道 aniframe是什么。这是最有可能的，这就是为什么你得到了所有这些反对票。很难理解任何情况下，理智的人（在那里没有沟通问题）真的想做类似“做的事情iframe——也就是说，嵌入一个页面——，但不使用iframe”。你是说你想“嵌入一个页面”，对吧？所以，使用iframe，给你。我可以说，为了“做 iframe 所做的事情，但不使用它”，使用一个svg标签，然后在其中添加一个foreignObject标签，这有点像iframe. 但同样，这似乎不太可能是您真正想要的。

但你应该得到怀疑的好处。也许我错了，你真的应该使用“复制和粘贴”嵌入页面——这比iframe. 这可能是关于您的页面在嵌入页面出现故障或更改时保持不变，谁知道呢。

在这种情况下，您确实会在 HTML 中获得“正文中的正文”，方法是将要嵌入的正文从外部页面的 HTML 复制到您自己页面的 HTML 中。（您还必须复制一些但不是全部的 JavaScript，和一些但不是全部的 CSS，所有这些都可能需要相当长的时间。）

“body inside body”很可能不是“格式良好”，但可以忽略这一点，因为浏览器（必须向后兼容）在非“格式良好”方面非常健壮。

然后，当您想确保外来的 CSS 将适用于嵌入部分，而您的页面的 CSS 不适用时，“body in body”的怪癖可能只是因祸得福。也就是说，您可以body>body在复制的外部 CSS 中的每个路径前添加（除非它包含body，然后替换body为body>body）。然后，给外部主体一个外部页面肯定不会使用的类（例如，使用你自己的名字），并body.coskan在“你的”CSS中的任何地方添加前缀。这与雅克的建议非常相似。

也许一个更好的主意（如果确实“创建外部页面的离线副本”是问题）是这样的：打开要嵌入到单独窗口/选项卡中的页面。然后，编写一些 JavaScript，它使用window.getComputedStyle和element.style. lorem=ipsum为了修改每个 dom 节点（在您希望嵌入的页面部分内），使其具有渲染中使用的样式（计算样式）作为内联样式，以便所有 CSS 都“推入” HTML（或 DOM）。然后，将修改后的 HTML 插入页面。很可能，有人已经编写了这样的“CSS inline-ifyer”工具。生成的 HTML 是“丑陋的”，但谁在乎呢。它做你想做的事，与“雅克方法”相比，这种方法要快得多（开发时间），并且嵌入的页面确实是静态的，iframe. （“静态”的意思是，如果 Oracle 改变他们的页面，它不会影响你的页面。）

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

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

于 2020-06-09T13:18:28.020 回答