Loading external page into my web page change the layout

Question

I have a C# MVC web application (application A) where I want to load a web page (P1) from another application. I have got the page P1, details and content, through a REST api call. When I load the P1 page into my A1 it messes with my CSS and JS, and overrides the A1 CSS/JS with the one P1 gets from the rest call.

How to make sure P1 does not override the CSS/JS of my page A1?

Answer 1

I do similar approach. I basically take the page of the other app and extract the body element and just embed that. With that approach css of the included app is not loaded

here is example code how I do it:

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