html - merge two pages with different styles into one

Question

I want to include a webpage into another, but preferably without an iframe, since I hate the scrollbars in the middle of the page.

Lets say I want to include A as a part of B

I tried doing it by creating a div on B where I wanted to include A then loading the page using JQuery like this:

$(document).ready(function() { 
    $('#inv_view').html('loading...').load("{% url 'invoice.invoice.view' invoice.ID %}");
});

My problem is that A uses its own set of CSS styles and these override the styles on B when A is loaded. How can i prevent this?

Again, I know it is easily done with an iframe, but... Meh

score 1 · Accepted Answer

要做到这一点并不容易，除非您控制两个页面的样式表。

如果你这样做，只需在所有规则前面加上一个类选择器。

将此类放在每个模板中的 body 标记上。

当您将一个页面拉入另一个页面时，只需将其与您的班级一起包装在一个 div 中。

score -1 · Accepted Answer

您可以通过 PHP 轻松地做到这一点。以下是您需要采取的步骤：

1：将您的两个文件从更改.html为.php（这将允许读取 php）

2：在要包含来自 fileA 的内容的 fileB 中，写入以下内容：

        <?php include 'fileA.php' ?>

3：在您的文件A 中，删除<html>、<header>和<body>标签。只需将要传输的内容保留到 fileB 即可。

为避免发生 CSS 更改，您需要id在有重叠冲突的地方添加 's。另一种选择：您也可以将所有 fileA 放在一个 div 中。然后，在样式重叠的地方直接访问 div，如下例所示：

p {
    font-size:18px;
}
#fileA p {
    font-size:25px;
}

2 回答 2