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

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');
}