如何找出导致 Edge Developer Tools 在公司 ASP.NET WebForms 网站上显示为空白的原因？

Question

我们有一个旧的 ASP.NET WebForms 站点，目前仅在 Microsoft Edge 中运行，因为数百个链接在弹出窗口中打开。需要重写，但那是我们的长期项目，还没有批准资源。

我最近学习了如何在第 2 页上的对话框调用第 3 页上的第 3 个对话框时使用计时器来更新第 1 页。第 3 页设置一个会话变量，第 1 页监听它。

这是我的第 1 页：

<form id="Form1" method="post" runat="server">
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            setTimeout(function () {
                var csrWhere = '<%=Session("csrWhere")%>'
                if (csrWhere != '') {
                    alert(csrWhere);
                    location.reload();
                }
            }, 200);
        });
    </script>
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <telerik:RadMenu ID="mnuMain" EnableEmbeddedSkins="false" CssClass="RadMenu_Claim" EnableShadows="true" OnClientItemClicking="MenuOpenWindow" CollapseAnimation-Type="None" DataSourceID="SiteMapDataSource1" Style="z-index: 999; position: absolute; top: 3px; left: 12px" runat="server" />
    <asp:SiteMapDataSource ID="SiteMapDataSource1" ShowStartingNode="False" SiteMapProvider="XmlSiteMapProviderHome" runat="server" />

它没有触发，所以我尝试打开开发人员工具并使用 Javascript 控制台查询一些信息。这时我注意到开发者工具将打开，但页面内容是空白的：

相比之下，我可以在运行相同浏览器的同一台电脑上来到这里，并且开发人员工具可以正常工作。

显然，网站上的某些内容正在干扰开发人员工具。我们公司有 2 位开发人员，我们都没有见过这种情况，也不知道是什么原因造成的。

这个网站项目有许多较旧的第三方 DLL，如 Telerik 和一个较旧的 Javascript 库，我怀疑它就是其中之一。

有谁知道我如何找出阻止我的开发人员工具的原因？

Answer 1

作为一般规则，使用更新面板时，您必须在页面加载之前在浏览器中打开开发人员工具（f12）！

如果没有，您跳转到某个页面，然后打开开发人员工具，然后在浏览器上点击刷新，然后单击按钮等。

我最近学习了如何在第 2 页上的对话框调用第 3 页上的第 3 个对话框时使用计时器来更新第 1 页。第 3 页设置一个会话变量，第 1 页监听它。

显然不是！

真的，我根本不建议尝试这样的黑客设计。如果用户打开多个选项卡会发生什么？真的，但真的真的，这不会产生一个稳定或强大的环境。

由于弹出窗口拦截器早已从网络世界消失，所以我建议您只需使用 NICE 弹出窗口实用程序替换弹出窗口即可。我曾经使用过 AjaxToolKit 对话框，但更好的是构建一个非常好的对话框控件 (ascx)。这样，对于任何页面，您都可以在此对话框控件中简单地拖放，然后就可以开始比赛了。

至于使用什么（多种选择）对话框弹出？嗯，有引导程序，但它们的启动方式有点麻烦。因此，最好的选择是采用 jQuery.UI，它确实工作得很好。

这些对话框实用程序如何绕过弹出窗口阻止程序？当然，为什么他们“伪造”弹出窗口，并使用创建的 div，并且使用 css，它们看起来像弹出窗口，行为也像弹出窗口，但是是标准的 HTML 标记，因此没有弹出窗口块会关心、触摸或防止这样，从那时起浏览器将不得不停止工作并停止允许标准 HTML 标记工作!!

因此，假设我们有一些删除按钮（服务器端代码），并且我们想要弹出一个提示来确认按钮单击。因此，如果用户点击“否”，那么我们什么都不做，但如果用户点击“是”，那么我们希望运行给定的按钮代码。

所以，说出这个标记：

        <asp:Button ID="cmdDelete" runat="server" Text="Delete"
            OnClientClick="return mydelete(this);"
            OnClick="cmdDelete_Click"
            CssClass="btn myshadow"
            />
        <br />
        <br />
        <br />
        <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>

        <div id="mypopdiv" style="display:none">
            <h3>Delete this record</h3>
            <h4><i>(this can't be undone)</i></h4>
        </div>


    <script>
        var mydeleteok = false
        function mydelete(btn) {

            if (mydeleteok) {
                mydeleteok = false
                return true
            }
            myDialog = $("#mypopdiv")
            myDialog.dialog({
                title: "Delete ?",
                modal: true,
                sizable: true,
                width: '300',
                appendTo: "form",
                closeText: "",
                dialogClass: "dialogWithDropShadow",
                position: { my: 'left top', at: 'right bottom', of: btn },
                buttons: [
                    {
                        id: "mydel",
                        text: "Delete",
                        class: "btn myshadow",
                        click: function () {
                            myDialog.dialog('close')
                            mydeleteok = true
                            $(btn).click()
                            return
                        }
                    },
                    {
                        id: "Cancel",
                        text: "Cancel",
                        class: "btn myshadow",
                        click: function () {
                            myDialog.dialog('close')
                        }
                    }
                ]
            })
            return false
        }
    </script>

背后的代码是这样的：

Protected Sub cmdDelete_Click(sender As Object, e As EventArgs)

    lblMsg.Text = "Server code delete will run"


End Sub

因此，结果是如果用户点击“删除”，则隐藏代码运行。如果用户点击取消，则服务器端代码不会运行。

因此，上面提供了一个不错的对话框，并且还提供了一种有条件运行按钮单击的好（简单）方法。

上面的 jQuery.UI 对话框也适用于显示任何“div”内容。

所以说进行编辑，那么我们可以使用这样的对话框：

因此，我建议您将 window() 弹出窗口替换为对话框控件，而不是尝试在 session() 中使用某些循环（这充其量也很困难）。显然，您希望为此目的构建一个很好的可重用库，并拥有某种可以使用某些参数调用的“我的流行”例程。无论哪种方式，为您的代码采用某种对话框系统不仅可以通过调用某些为您弹出某种对话框的 JavaScript 库来替换 window() 弹出窗口，还可以使重构变得更加容易。