jquery 加载 pdf 时不会在 iframe 上触发加载事件 - 即使它在单独的项目中触发正常

Question

我有一个非常奇怪的问题，我无法弄清楚。我正在尝试将加载对话框添加到生成 pdf 的页面。我在一个单独的项目中对网页进行编码，对话框运行良好。但是当我将极其基本的 jquery-ui 代码包含到我现有的网站项目中时，它不起作用。具体来说，当 PDF 加载到 iframe 中时，弹出窗口不会消失。基本上 .load(function()) 事件不会触发。

但是事件在我的单独项目中触发得很好。我使用完全相同的数据和代码生成完全相同的 pdf，并且工作正常。但是放到我的主工程里面，load事件没有触发。

这是我的代码。我工作的公司仍然使用网络表单，所以 ...

未触发的代码

$(function () {
    $("[id$=ifPDF]").load(function () {
        hideDialog();
    });
});

如果你们能帮我找到冲突，将不胜感激

nice.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/main.master" AutoEventWireup="true" CodeFile="nice.aspx.cs" Inherits="letters_missed_appointment_nice" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link rel="stylesheet" type="text/css" href="\resources\css\letters.css" />
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <style type="text/css">
        #dialog {
            display: none;
        }
    </style>
    <script type="text/javascript">
        function showDialog() {
            $("#dialog").dialog();
        }
        function hideDialog() {
            $("#dialog").dialog("close");
        }
        $(function () {
            $("[id$=ifPDF]").load(function () {
                hideDialog();
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="pageHeader" Runat="Server">
    Cabinet
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="pageContent" Runat="Server">
    <h1>Nice Letter</h1>
    <h3>Enter in the information below and click "Create Letter".</h3>
    <asp:UpdatePanel ID="upMain" runat="server">
        <ContentTemplate>
            <table>
                <tr>
                    <td>Letter Date:&nbsp;&nbsp;&nbsp;</td>
                    <td><asp:TextBox ID="txtLetterDate" runat="server"></asp:TextBox>&nbsp;&nbsp;&nbsp;</td>
                    <td>Recipient Name:&nbsp;&nbsp;&nbsp;</td>
                    <td><asp:TextBox ID="txtRecipientName" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>Appointment Date:&nbsp;&nbsp;&nbsp;</td>
                    <td><asp:TextBox ID="txtAppointmentDate" runat="server"></asp:TextBox>&nbsp;&nbsp;&nbsp;</td>
                    <td>Patient Name:&nbsp;&nbsp;&nbsp;</td>
                    <td><asp:TextBox ID="txtPatientName" runat="server"></asp:TextBox></td>
                </tr>
                <tr><td>&nbsp;&nbsp;&nbsp;</td></tr>
                <tr>
                    <td><asp:Button ID="cmdCreateLetter" Text="Create Letter" OnClientClick="showDialog();" runat="server" /></td>
                </tr>
            </table>
            <br />
            <iframe id="ifPDF" visible="false" runat="server" />
            <div id="dialog" title="Loading PDF">Loading PDF, Please Wait ...</div>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

nice.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class letters_missed_appointment_nice : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ifPDF.Attributes["class"] = "pdf_view";
        cmdCreateLetter.Click += new EventHandler(Load_PDF);
    }

    protected void Load_PDF(object sender, EventArgs e)
    {
        ifPDF.Visible = true;

        PDFGenerator my_doc = new PDFGenerator();
        my_doc.Template = Server.MapPath("nice_letter.html");

        my_doc.Add("letter_date", txtLetterDate.Text);
        my_doc.Add("recipient_name", txtRecipientName.Text);
        my_doc.Add("patient_name", txtPatientName.Text);
        my_doc.Add("appointment_date", txtAppointmentDate.Text);

        byte[] doc_array = my_doc.CreateDocument(base_url: Server.MapPath("/letters/missed_appointment/"));

        string b64_doc = Convert.ToBase64String(doc_array, 0, doc_array.Length);
        string pdf_src = $"data:application/pdf;base64,{b64_doc}";
        ifPDF.Attributes["Src"] = pdf_src;
    }
}

letters.css

body > form > main {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5px;
    min-height: 800px;
}

body > form > footer {
    position: static;
    padding-bottom: 50px;
}

.pdf_view {
    width: 100%;
    height: 700px;
    border: none;
}

main.css

body {
    margin: 0px;
    background-color: #e7e7de;
    font-family: 'Roboto', sans-serif;
}

    body > form > #pageGreeting {
        width: calc(100%-20px);
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        background-color: #0f3057;
        box-shadow: 0px 4px 15px -1px #000000;
    }

        body > form > #pageGreeting > #pageTitle {
            font-size: 35px;
            font-weight: 700;
            color: #e7e7de;
            font-family: 'Courgette', cursive;
        }

        body > form > #pageGreeting > nav {
            display: inline-block;
            margin-left: 30px;
            font-size: 20px;
            border-left: 3px solid #e7e7de;
            padding-left: 30px;
        }

            body > form > #pageGreeting > nav > span {
                display: inline-block;
                margin-left: 10px;
                border-left: 1px solid #e7e7de;
                border-right: 1px solid #e7e7de;
                padding-left: 10px;
                padding-right: 10px;
            }

                body > form > #pageGreeting > nav > span:first-child {
                    margin-left: 0px;
                    border-left: none;
                }

                body > form > #pageGreeting > nav > span:last-child {
                    border-right: none;
                }

                body > form > #pageGreeting > nav > span > a {
                    color: aqua;
                    text-decoration: none;
                    font-weight: 900;
                    font-size: 25px;
                }

                    body > form > #pageGreeting > nav > span > a:hover {
                        color: blue;
                    }

    body > form > main {
        width: 100%;
        background-color: #e7e7de;
        min-height: 600px;
        margin-top: 15px;
    }

        body > form > main > h1 {
            display: block;
            margin-left 15px;
        }

    body > form > footer {
        position: absolute;
        bottom: 0px;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        font-family: Arial;
        font-size: 15px;
        font-weight: 900;
        background-color: #00597a;
        color: white;
    }

div.pageDescription {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 20px;
    font-size: 30px;
    text-align: center;
    font-weight: 700;
}

main.master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="main.master.cs" Inherits="main" %>

<!DOCTYPE html>

<html>
    <head runat="server">
        <title></title>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Courgette&family=Roboto:wght@300&display=swap" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="resources/css/main.css" />
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="frmMain" runat="server">
            <asp:ScriptManager ID="smMain" runat="server"></asp:ScriptManager>
            <div id="pageGreeting">
                <span id="pageTitle"><asp:ContentPlaceHolder ID="pageHeader" runat="server"></asp:ContentPlaceHolder></span>
                <nav><% WriteNav(); %></nav>
            </div>
            <main><asp:ContentPlaceHolder ID="pageContent" runat="server"></asp:ContentPlaceHolder></main>
            <footer>Copyright &copy; 2022 Renewed Life Chiropractic Center - All Rights Reserved</footer>
        </form>
</body>
</html>

Answer 1

您可能有来自浏览器“cors”的阻止，检查开发人员控制台 (f12) 上的阻止消息或您可能必须发送的任何错误消息 headers 以允许在“parent”页面

Answer 2

我认为您的 iframe 的 ID 在呈现时发生了变化，因为您使用了 'runat="server"' 属性。这就是为什么 javascript 没有通过 ID 找到这个控件。尝试将 clientidmode 设置为静态，如下所示：

<iframe id="ifPDF" visible="false" runat="server" ClientIDMode="Static" />

jquery 加载 pdf 时不会在 iframe 上触发加载事件 - 即使它在单独的项目中触发正常

jquery load event not triggering on iframe when loading pdf - Even when it does trigger fine in seperate project

css

c#

jquery

webforms

jquery-ui