CODEWITHSUNDEEP
javascriptjquery
user1735856
user1735856

Reputation: 281

Customize styles of popup from parent

I´m trying to open a new URL as a popup. That works. Now I´m trying to customize the style etc. from the popup. That doesn´t work. What´s going wrong?

Exception: "Uncaught TypeError: Cannot read property 'style' of null"

                <script>
                function startGaLandingpage(url) {
                    params = 'width=' + screen.width;
                    params += ', height=' + screen.height;
                    params += ', top=0, left=0'
                    params += ', fullscreen=yes';
                    var url = 'https://www.google.com/analytics/web/?hl=en&pli=1#realtime/rt-overview/a29259688w55318706p63647373/'
                    landingpage = window.open(url, 'landingpage', params);
                    var landingpagescript = document.createElement('script');
                    landingpagescript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';
                    landingpagescript.type = 'text/javascript';
                    landingpage.document.getElementsByTagName('head')[0].appendChild(landingpagescript);

                    var div = landingpage.document.getElementById('ID-navPanelContainer').style;
                    if (div)
                        void (div.display = (div.display == 'none') ? 'block' : 'none');
                    var div = landingpage.document.getElementById('ID-headerPanel').style;
                    if (div)
                        void (div.display = (div.display == 'none') ? 'block' : 'none');
                    var div = landingpage.document.getElementById('ID-overviewPanelTrafficSourceValueOrganicTable').style;
                    if (div)
                        void (div.display = (div.display == 'none') ? 'block' : 'none');
                    var div = landingpage.document.getElementById('ID-overviewPanelGeoComponent').style;
                    if (div)
                        void (div.display = (div.display == 'none') ? 'block' : 'none');
                    var div = landingpage.document.getElementById('ID-footerPanel').style;
                    if (div)
                        void (div.display = (div.display == 'none') ? 'block' : 'none');
                    var div = landingpage.document.getElementById('ID-navToggle').style;
                    if (div)
                        void (div.display = (div.display == 'none') ? 'block' : 'none');
                    var div = landingpage.document.getElementById('ID-overtimePanel').style;
                    if (div)
                        void (div.display = (div.display == 'none') ? 'block' : 'none');
                    var div = landingpage.document.getElementById('ID-contextDetailsPanel').style;
                    if (div)
                        void (div.display = (div.display == 'none') ? 'block' : 'none');
                    var div = landingpage.document.getElementById('ID-reportHeader').style;
                    if (div)
                        void (div.display = (div.display == 'none') ? 'block' : 'none');
                    var div = landingpage.document.getElementById('ID-realtimeReportFootnote').style;
                    if (div)
                        void (div.display = (div.display == 'none') ? 'block' : 'none');

                }

            </script>

Upvotes: 0

Views: 215

Answers (2)

Teemu
Teemu

Reputation: 23406

document refers to the document of the current page, i.e. the main page. You need to refer to the document of the newly opened window:

var div = landingpage.document.getElementById(...).style;

I suppose that old jQuery is also meant to load to the pop-up, so you'll need the same reference when appending the element1 too.

Also it's possible, that opening the pop-up will take some time. Hence it's better to put all stuff for pop-up to a separate function, and call that function within setTimeout, or rather from the pop-up itself just before closing body tag.

EDIT

div will be undefined if #ID-navPanelContainer doesn't exist. Checking a style of undefined just throws an error. Your checkings should be something like this:

var div = landingpage.document.getElementById('ID-navPanelContainer');
if (div) {
    void (div.style.display = (div.style.display == 'none') ? 'block' : 'none');
}

Upvotes: 0

kms
kms

Reputation: 389

You are redeclaring landingpage:

landingpage = window.open(url, 'landingpage', params);
...
var landingpage = document.createElement('script');

In that case you cannot use the former one inside the same function any more. This might just be adding to the issue.

I suggest renaming the new variable which holds the script tag maybe to landingpagescript

var landingpagescript = document.createElement('script');

Upvotes: 1

Related Questions