How to preserve the cache of an iframe?

Question

How to preserve the cache of an iframe?

Navigation

#1 by (2 votes)

3

When changing an angle route, 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();

javascript angularjs

asked by anonymous 29.10.2018 / 13:56

1 answer

How to add a second Y-axis using the matplot function? Use multi-tenancy model or other types?

score 2 · Answer 1

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

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

I'm going to start with a constructive criticism, I do not understand the intention of using jQuery with Angular.js, not that of problems, but it sure is kind of like driving two cars at the same time, but this is something that goes beyond the scope of current question, then I'll talk about this later.

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

Now, this way when you change the routes in Angular.js the scope itself will toggle the iframes for each route, notice that I removed the iframe ID, since repeated IDs can be a problem.

I also solved everything with javascript, without jQuery.

To better explain, every created iframe is added to the object cachediframes and is there saved, whether it was loaded or not, this if checked if the iframe already exists:

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

And return; prevents the script from continuing there.