Хранение iframe при нажатии элемента

Question

У меня есть iframe, который скрыт, и когда функция загрузки заканчивается, он меняет видимость.

Я делаю это, потому что в функции загрузки я делаю некоторые изменения в стилях iframe, например, некоторые элементы, которые я скрываю, и изменение цвета фона, поэтому пользователь не видит старые стили, и когда он заканчивается, я меняю iframe - видимый.

Теперь у меня есть проблема, когда пользователь нажимает на элемент, который переходит на другую страницу, старые стили отображаются до тех пор, пока функция загрузки iframe не закончится и снова изменит стили.

Я хотел бы изменить видимость iframe на скрытый, когда пользователь нажимает на этот элемент, а затем на функцию загрузки, он снова изменит iframe на видимый.

Прямо сейчас я делаю это:

$(function(){ 
    var f=$('#foo') 
    f.load(function(){ 
     var css = '<style type="text/css">#_____c, #navTabs {display: none;} body{background: white;}</style>'; 
     f.contents().find("head").append(css); 

     document.getElementById("foo").style.visibility = 'visible'; 

     f.contents().find("#_bw0__r").on('click', function(event) { 
      document.getElementById("foo").style.visibility = 'hidden'; 
     }) 
    }); 
}); 

Но когда пользователь взаимодействует с некоторыми элементами фрейма функция OnClick не работает на следующей странице загрузки.

Answer 1

f.contents().find("#_bw0__r").on('click', function(event) { 
     document.getElementById("foo").style.visibility = 'hidden'; 
    }) 

положить его вне f.load (функция)