javascript – How to preserve an iframe cache?

Question:

When changing a route from angular, I would like to preserve the cache of an iframe that was 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:

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

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

I'll start with a constructive criticism, I don't understand what the intention of using jQuery with Angular.js is, not that it's a problem, but it's definitely like wanting to drive two cars at the same time, but this is beyond the scope of the current question, so at another time I will speak of 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, so when changing routes in Angular.js the scope itself will switch the iframes for each route, note that I removed the iframe ID, because repeated IDs is something that can cause a problem.

I also solved everything with javascript, no need for jQuery.

To explain better, every iframe created is added to the cachediframes object and is saved there, having been loaded or not, this if checks if the iframe already exists:

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

And the return; prevents the script from continuing there.

Scroll to Top