JQuery Modal Popup调用后嵌入PDF空白问题求助

我来帮你搞定这个弹窗里PDF显示黑屏的问题，咱们先理清楚核心矛盾：PDF路径是完全没问题的（直接显示embed组件能正常加载），但放到jQuery UI的Modal弹窗里就失效，哪怕后端先设置好src再调用弹窗也没用。这大概率是DOM加载时机不对或者弹窗初始化时的DOM移动干扰导致的，下面给你几个可行的解决方案：

原因分析 #

jQuery UI的dialog组件在初始化时，会把目标DOM元素（也就是你的#displaypdf）移动到页面的其他位置（通常是body末尾）。如果这时候embed的src刚被后端设置，浏览器可能还没来得及完成PDF的加载请求，就因为DOM被移动而中断了；或者弹窗初始化时，embed元素还没完成渲染，直接导致加载失败。

另外，用file:协议加载本地Z盘的文件，在浏览器中可能存在安全限制——当你的页面是通过HTTP服务器访问时，浏览器会阻止跨协议的本地文件加载，而直接显示embed时可能刚好绕过了这个限制（比如页面是本地打开的）。

解决方案1：延迟弹窗初始化，确保PDF路径已生效 #

修改你的前端ShowPopup函数，给DOM一点更新时间，或者在弹窗打开时强制刷新embed元素：

function ShowPopup() {
  // 延迟100ms再初始化弹窗，确保后端设置的src已经渲染到页面
  setTimeout(function() {
    $("#displaypdf").dialog({
      modal: true,
      height: 800,
      width: 800,
      open: function() {
        // 弹窗打开后，重新设置一次src触发PDF加载
        const pdfEmbed = document.getElementById('pdffile');
        pdfEmbed.src = pdfEmbed.src;
      }
    });
  }, 100);
  return false;
};

这个方法的核心是给浏览器足够的时间处理src的更新，同时在弹窗打开时强制触发embed的加载，避免DOM移动导致的加载中断。

解决方案2：前端动态设置PDF路径，避免后端直接赋值的时机问题 #

把PDF路径通过后端脚本传递给前端，由前端在弹窗初始化前主动设置src，这样能更好地控制加载时机：

后端代码修改 #

protected void SelectButton_Click(object sender, EventArgs e) {
    string DirPath = Request.QueryString["Dir"];
    Button btnButton = sender as Button;
    GridViewRow gvRow = (GridViewRow)btnButton.NamingContainer;
    Label SelectLink = (Label)gvRow.FindControl("SelectLink");
    string pdfPath = "file:Z:/testdirectory/" + DirPath + "/" + SelectLink.Text;
    // 将PDF路径作为参数传给前端的ShowPopup函数
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", $"ShowPopup('{pdfPath}');", true);
}

前端脚本修改 #

function ShowPopup(pdfPath) {
  $(function () {
    const $pdfEmbed = $("#pdffile");
    // 先给embed设置路径
    $pdfEmbed.attr('src', pdfPath);
    $("#displaypdf").dialog({
      modal: true,
      height : 800,
      width : 800,
      open: function() {
        // 检查embed是否加载完成，未完成则重新触发
        if ($pdfEmbed[0].readyState !== 4) {
          $pdfEmbed[0].src = pdfPath;
        }
      }
    });
  });
  return false;
};

这种方式把路径设置的控制权放到前端，能确保弹窗初始化前src已经被正确赋值。

解决方案3：改用HTTP协议加载PDF（推荐） #

file:协议的兼容性很差，尤其是在HTTP环境下，浏览器的安全策略会阻止本地文件的加载。你可以把PDF文件放到网站的虚拟目录下，用HTTP路径访问：

后端代码修改 #

protected void SelectButton_Click(object sender, EventArgs e) {
    string DirPath = Request.QueryString["Dir"];
    Button btnButton = sender as Button;
    GridViewRow gvRow = (GridViewRow)btnButton.NamingContainer;
    Label SelectLink = (Label)gvRow.FindControl("SelectLink");
    // 假设PDF文件放在网站根目录的pdfs文件夹下，对应Z盘的testdirectory
    string pdfRelativePath = "/pdfs/" + DirPath + "/" + SelectLink.Text;
    // 生成正确的HTTP路径
    pdffile.Src = ResolveUrl(pdfRelativePath);
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup();", true);
}

这样用HTTP协议加载PDF，既能避免安全限制，也能让加载过程更稳定。

你可以先试试方案1，这个改动最小，如果不行再试方案2，最后考虑方案3（长远来看方案3是最可靠的）。

内容的提问来源于stack exchange，提问作者Dan Nick