I have a requirement to render an external view within CRM an use the most page real estate possible. In order to achieve this I have a web resource which manipulates the DOM and then changes the source address of the iframe within #contentIFrame0 to the address of my view. The issue is that when I navigate to any other view, my DOM changes are still in effect. Namely, #crmTopBar, #formHeaderContainer and #formFooterContainer are hidden and #crmContentPanel is still higher on the screen than it should be.
Script excerpt:
$(window.parent.parent.document.getElementById('crmTopBar')).hide();
$(window.parent.document.getElementById('formHeaderContainer')).hide();
$(window.parent.document.getElementById('formFootersContainer')).hide();
$(window.parent.parent.document.getElementById('crmContentPanel')).css('top', '50px');
$(window.parent.document.getElementById('mainContainer')).css('left', 0).css('max-width', 'unset');
$(window.parent.document.getElementById('tdAreas')).css('height', $(window.parent).height());
Is there a global from change or navigation change event that I can modify and add script to which will revert my DOM changes when navigating away from my new UI?
Things that don't work:
targeting #contentFrame0 to render my new view: this seems to break navigation entirely
modifying the webResource which I use for navigating to other pages: since the other forms are already loaded, this script does not run again if I go back to a previously loaded screen
*This post is locked for comments