Question

我正在尝试打开一个新的URL作为弹出窗口。这样可行。现在我正在尝试从弹出窗口自定义样式等。那不起作用。出了什么问题？

例外： “未捕获的TypeError：无法读取属性'style'的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>

Answer 1

您正在重新声明目标网址：

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

在这种情况下，您不能再使用同一功能中的前一个。这可能只会增加问题。

我建议将保存脚本标记的新变量重命名为landingpagescript

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

Answer 2

document指的是当前页面的document，即主页面。您需要参考新打开的窗口的document：

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

我认为旧的jQuery也可以加载到弹出窗口，因此在添加element1时也需要相同的引用。

也有可能，打开弹出窗口需要一些时间。因此，最好将弹出窗口中的所有内容放入单独的函数中，并在setTimeout内调用该函数，或者在关闭body标记之前调用弹出窗口。

修改

如果div不存在，
undefined将为#ID-navPanelContainer。检查style undefined只会引发错误。您的检查应该是这样的：

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

从父级自定义弹出窗口的样式

2 个答案: