将外部页面加载到我的网页中会更改布局

Question

我有一个 C# MVC Web 应用程序（应用程序 A），我想从另一个应用程序加载一个网页 (P1)。我通过 REST api 调用获得了页面 P1、详细信息和内容。 当我将 P1 页面加载到我的 A1 中时，它会与我的 CSS 和 JS 混淆，并使用 P1 从其余调用中获得的一个覆盖 A1 CSS/JS。

如何确保 P1 不会覆盖我的页面 A1 的 CSS/JS？

Answer 1

我做类似的方法。我基本上取另一个应用程序的页面并提取 body 元素并嵌入它。使用这种方法，包含的应用程序的 css 不会被加载

这是我如何做的示例代码：

function loadApp(url) {
    // fetch P1 page via jQuery
    $.get(url, function (data) {
        var page = $(data);

        // in the app I have a div with id "frame" where P1 should be loaded into
        $('#frame').html("");
        // in P1 I have a div with id "content" which should be included
        // all CSS and JS are outside
        page.find('#content').appendTo('#frame');

        // rewrite relative urls
        $('#frame').find('img').each(function (i) {
            var src = $(this).attr('src');
            if (!src.toLowerCase().startsWith('http://')) {
                $(this).attr('src', url + '/' + src);
            }
        });
    }, 'html');
}