移动端IFrame内嵌站点按钮跳转第三方页面至新窗口的实现问询

问题场景 #

网站被嵌入移动端APP的IFrame中，iOS端点击动态生成的按钮时，第三方页面/下载页会在IFrame内部打开，导致用户无法返回。按钮由PHP动态生成，data-action属性存储目标第三方URL，尝试window.open和_blank属性无效，因URL为动态获取无法提前指定。

解决方案：动态创建临时<a>标签实现跳转 #

无需依赖window.open或直接设置_blank，通过以下步骤实现新窗口打开目标链接：

1. 调整PHP按钮生成代码 #

修改PHP代码，在onclick事件中传入当前按钮元素，方便JS获取data-action值：

$button .= "<button class=\"btn btn-product-box get-coupon-btn deal-download ".$extraClass."\" onclick=\"myFunction(this)\" data-action=\"" . $purchaseAction . "\">" . $text . "</button>";

2. 重写JavaScript点击函数 #

替换原有myFunction，实现动态创建临时链接并触发跳转：

function myFunction(btn) {
    // 从按钮的data-action属性获取目标URL
    const targetUrl = btn.getAttribute('data-action');
    if (!targetUrl) return; // 无有效URL则终止执行

    // 创建临时<a>标签
    const tempAnchor = document.createElement('a');
    tempAnchor.href = targetUrl;
    tempAnchor.target = '_blank';
    
    // 触发点击事件
    tempAnchor.click();
    
    // 移除临时标签，清理DOM
    tempAnchor.remove();
}

3. 优化函数定义位置 #

注意避免在PHP循环内重复输出<script>定义myFunction，将该函数移至页面全局脚本区域（如页面底部），防止函数重复覆盖。

补充方案（若APP WebView允许） #

如果APP的WebView允许IFrame操作顶层窗口，也可通过顶层窗口打开链接（本质仍用到window.open，若严格禁用则优先选上述方案）：

function myFunction(btn) {
    const targetUrl = btn.getAttribute('data-action');
    if (targetUrl) {
        window.top.open(targetUrl, '_blank');
    }
}

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