如何通过onclick事件同时触发广告加载与Timer1两个JS函数

广告无法正常加载由两个核心错误导致：

• 执行逻辑冲突：myFunction中直接调用window.location触发页面跳转，浏览器执行跳转时会立刻终止当前页面所有未完成的脚本执行、网络请求，广告逻辑还没完成加载就被打断
• API使用错误：document.write仅能在页面初始HTML解析阶段使用，页面加载完成后触发点击事件再调用document.write，会自动清空当前页面所有已有内容，本身就不适合动态注入广告的场景

1. 替换按钮的onclick绑定，将两个分离的函数合并为统一的处理逻辑，避免顺序执行导致的跳转打断问题
2. 用动态创建script节点的方式替代document.write注入广告脚本，不会清空页面原有内容
3. 广告脚本注入完成后增加短延迟，再执行业务跳转，给广告加载、上报留出足够时间

首先修改按钮的onclick属性：

<button onclick="handleAdAndTimer()" class="btn btn-success" style="margin-top: 40px; border-radius: 20px;">
    <b> Fidan Dik</b>
</button>

替换原有的两个script函数为以下代码：

<script>
function handleAdAndTimer() {
    // 配置Adsterra广告参数
    window.atOptions = {
        'key' : 'c7cb7e984302b571ae53490b98af1031',
        'format' : 'iframe',
        'height' : 60,
        'width' : 468,
        'params' : {}
    };
    // 动态创建广告脚本节点，替代document.write
    const adScript = document.createElement('script');
    adScript.type = 'text/javascript';
    adScript.src = `${location.protocol === 'https:' ? 'https:' : 'http:'}//seekgeographical.com/c7cb7e984302b571ae53490b98af1031/invoke.js`;
    document.body.appendChild(adScript);
    // 延迟800ms跳转，可根据实际加载速度调整为500-1000ms区间值
    setTimeout(() => {
        window.location.href = "/FidanDik/Timer1";
    }, 800);
}
</script>

• 延迟时间不要设置过短，否则广告请求还没发出就触发跳转，会导致Adsterra统计不到广告展示，影响收益
• 禁止在页面加载完成后的交互事件中使用document.write，该API设计仅用于页面初始渲染阶段，不支持动态加载场景
• 如果需要确保广告脚本加载完成后再跳转，可以给adScript增加onload回调，在回调里触发跳转；但Adsterra广告iframe内部加载存在跨域限制，无法监听内部资源加载状态，短延迟是兼容性最好的方案

内容的提问来源于stack exchange，提问作者Selman Altuğ