How to preserve an iframe cache?

Question

When changing an angular path, I would like to preserve the cache of an iframe that has been read and rendered:

$scope.loading_guten_pro = false;

$scope.url_pro = '/acesso-pro';

$scope.iframePro = function() {
    $scope.loading_guten_pro = true;
    var iframe = '<iframe width="800" class="iframe-pro" id="content_iframe_pro" src="'+$scope.url_pro+'" frameborder="0" style="height:92vh" scrolling="auto" allowfullscreen></iframe>';
    $("#iframe_content_pro").html(iframe);
    $('#content_iframe_pro').contents().find('.header').remove();
    $('#content_iframe_pro').on('load',function () {
            $scope.loading_guten_pro = false;
    });
};
$scope.iframePro();

Answer 1

Do you want CACHE even, or do you want to "keep the frame" with the content already loaded? I say this because CACHE is not solved in front-end., is resolved in the HTTP response next to the browser interface.

If the intention is to keep only iframe then the solution is to manipulate the DOM

I’m going to start with a constructive criticism, I don’t understand what the intention is to use jQuery with Angular.js, not that of problems, but it’s definitely like wanting to drive two cars at once, but this is something that is outside the scope of the current question, so another time I’ll talk about this.

If the intention is just to keep the iframe with the content already loaded then you can manipulate the DOM like this:

var cachedframes = {};

$scope.iframePro = function() {

    var target = document.getElementById('#iframe_content_pro');

    if (!target) return;

    //Checa se já existe o iframe
    if (cachedframes[$scope.url_pro]) {
         target.html(iframe);
         return;
    }

    $scope.loading_guten_pro = true;

    var iframe = document.createElement('iframe');

    iframe.setAttribute('class', 'iframe-pro');
    iframe.setAttribute('style', 'height:92vh');
    iframe.setAttribute('scrolling', 'auto');
    iframe.setAttribute('allowfullscreen', '');

    iframe.addEventListener('load', loaded);

    iframe.src = $scope.url_pro;

    cachediframes[$scope.url_pro] = iframe;

    function loaded() {
         var header = iframe.contentWindow.querySelector('.header');

         if (header.parentNode) header.parentNode.removeChild(header);

         header = null;

         $scope.loading_guten_pro = false;

         iframe.removeEventListener('load', loaded);
    }
};

Okay, this way when changing the routes in Angular.js the Cope itself will switch the iframes for each route, note that I removed the id from the iframe, because Repeated Ids is something that can give problem.

I also solved everything with javascript, no need jQuery.

To better explain, every created iframe is added to the object cachediframes and is safe there, whether it has been loaded or not, this if checks if there is already an iframe:

//Checa se já existe o iframe
if (cachedframes[$scope.url_pro]) {
     target.html(iframe);
     return;
}

And the return; prevents the script from continuing there.