弹窗加载脚本后无法触发函数及alert问题求助

我来帮你搞定这个头疼的问题——新窗口里的脚本完全没反应，alert弹不出来，按钮点击也没用，核心原因是脚本加载时机不对，咱们一步步来修复：

问题根源分析 #

你现在的代码是用document.write把所有HTML和脚本一次性写入新窗口，然后立刻调用eKoopman2()。但外部脚本（descargarPDF.js和html2pdf.bundle.min.js）是异步加载的，这时候函数还没被定义，自然执行不了。另外，html2pdf是descargarPDF.js的依赖，你得确保先加载完html2pdf再加载你的自定义脚本，不然也会报错。

修复方案1：利用新窗口的onload事件 #

等新窗口的所有资源（包括外部脚本）都加载完成后，再执行函数，这样就能保证函数已经被定义了：

jQuery(document).ready(function( $ ){ 
  // 注意：live()已废弃，建议换成on()
  $(document).on("click", "#imprimirPdf", function () { 
    var divContents = $("#cartaDeAmor").html();
    var printWindow = window.open('', '', 'height=400,width=800');
    
    // 写入基础HTML结构
    printWindow.document.write('<!DOCTYPE html>');
    printWindow.document.write('<html>');
    printWindow.document.write('<head>');
    // 先加载依赖的html2pdf，再加载自定义脚本
    printWindow.document.write('<script type="text/javascript" src="http://www.mywebsiteurl.com/html2pdf.bundle.min.js"><\/script>');
    printWindow.document.write('<script type="text/javascript" src="http://www.mywebsiteurl.com/descargarPDF.js"><\/script>');
    printWindow.document.write('</head>');
    printWindow.document.write('<body>');
    printWindow.document.write('<div id="carta">' + divContents + '</div>');
    printWindow.document.write('<input type="button" value="Function trigger test" onclick="eKoopman2();">');
    printWindow.document.write('</body>');
    printWindow.document.write('</html>');
    
    // 关键：等新窗口所有资源加载完成后再执行函数
    printWindow.onload = function() {
      printWindow.eKoopman2();
    };
    
    printWindow.document.close();
  }); 
});

修复方案2：动态加载脚本并监听加载完成 #

这种方式更灵活，能严格控制脚本的加载顺序，避免依赖问题：

jQuery(document).ready(function( $ ){ 
  $(document).on("click", "#imprimirPdf", function () { 
    var divContents = $("#cartaDeAmor").html();
    var printWindow = window.open('', '', 'height=400,width=800');
    var doc = printWindow.document;
    
    // 先写入基础HTML结构
    doc.write('<!DOCTYPE html><html><head></head><body><div id="carta">' + divContents + '</div><input type="button" value="Function trigger test" onclick="eKoopman2();"></body></html>');
    doc.close();
    
    // 封装脚本加载函数，加载完成后执行回调
    function loadScript(url, callback) {
      var script = doc.createElement('script');
      script.type = 'text/javascript';
      script.src = url;
      // 脚本加载完成后触发回调
      script.onload = callback;
      doc.head.appendChild(script);
    }
    
    // 先加载html2pdf，加载完成后再加载自定义脚本，最后执行函数
    loadScript('http://www.mywebsiteurl.com/html2pdf.bundle.min.js', function() {
      loadScript('http://www.mywebsiteurl.com/descargarPDF.js', function() {
        printWindow.eKoopman2();
      });
    });
  }); 
});

额外注意事项 #

• 替换live()为on()：live()在jQuery 1.7之后已经被废弃，使用$(document).on('click', '#imprimirPdf', ...)兼容性更好。
• 脚本顺序：一定要先加载html2pdf.bundle.min.js，再加载descargarPDF.js，不然eKoopman2()里调用html2pdf会提示“未定义”。

内容的提问来源于stack exchange，提问作者Patrick Ben