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

Question

我有一个 C# MVC Web 应用程序(应用程序 A)，我想从另一个应用程序加载网页 (P1)。我通过 REST api 调用获得了页面 P1、详细信息和内容。当我将 P1 页面加载到我的 A1 中时，它扰乱了我的 CSS 和 JS，并用 P1 从 rest 调用中获得的一个覆盖了 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');
}