如何在popupWin.document.write中正常加载并显示Google Translate？

问题出在这几个核心点：

• Google Translate初始化脚本执行时，目标容器google_translate_element还未被添加到DOM中，导致找不到元素无法完成初始化
• 弹出窗口的window.print()触发过早，打断了Google Translate脚本的加载与渲染流程
• 脚本标签的拼接方式存在语法风险，可能引发解析错误

修复步骤 #

• 先添加Google Translate的容器元素，再加载初始化脚本和官方翻译脚本，确保DOM元素存在后再执行初始化逻辑
• 移除自动触发的打印操作，改为手动触发，给翻译组件足够的加载时间
• 优化脚本标签的拼接方式，避免不必要的字符串拆分引发的解析问题

修正后的完整代码 #

function print() {
    var tableHtml = `<table>
                        <tr>
                            <th>Items</th>
                            <th class='number-left'>Qty</th>
                        </tr>`;
    items.forEach(function(item) {
        tableHtml += `<tr>
                        <td>${item.name}</td>
                        <td class='number-left'>${item.qty}</td>
                    </tr>`;
    });
    tableHtml += `</table>`;
    
    // 先添加翻译组件的目标容器
    tableHtml += `<br><div id="google_translate_element"></div>`;
    
    // 再添加初始化脚本与官方翻译脚本
    tableHtml += `<script>
                    function googleTranslateElementInit() {
                        new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
                    }
                </scr`+`ipt>`;
    tableHtml += `<script src='https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></scr`+`ipt>`;

    var popupWin = window.open('', '_blank', 'width=800,height=600');
    popupWin.document.open();
    popupWin.document.write(`<html>
                            <head>
                                <style>
                                    .number-left{text-align: left;}
                                    .number-right{text-align: right;}
                                </style>
                            </head>
                            <body>
                                ${tableHtml}
                                <button onclick="window.print()">点击打印</button>
                            </body>
                        </html>`);
    popupWin.document.close();
}

补充说明 #

• 调整弹出窗口尺寸，给翻译组件预留足够的显示空间
• 保留</scr+ipt>的写法，避免在模板字符串中出现完整闭合标签导致当前页面的脚本提前终止
• 手动打印按钮让用户可以在翻译组件加载完成后再执行打印操作

内容的提问来源于stack exchange，提问作者Sathish Selvam