WordPress站点适配Usercentrics：如何在iframe加载前将src改为data-src以实现合规同意管理

你的问题很典型——客户端脚本改属性确实会有「闪加载」的问题，因为浏览器在解析HTML时看到src就会立刻发起请求，等DOMContentLoaded触发时已经晚了。想要彻底解决，必须在服务器端输出HTML之前就把src替换成data-src，这样浏览器拿到的就是已经处理好的iframe，根本不会提前加载。下面给你几个靠谱的实现方案：

方案一：利用WordPress内容钩子精准替换 #

如果你的iframe是出现在文章/页面内容里的，直接用the_content过滤器来修改输出内容就够了，代码简单且精准：

add_filter('the_content', 'swap_iframe_src_to_datasrc');
function swap_iframe_src_to_datasrc($content) {
    // 只替换ID为partnerIFrame的iframe，避免影响其他正常iframe
    $content = preg_replace('/<iframe id="partnerIFrame" src="([^"]+)"/', '<iframe id="partnerIFrame" data-src="$1"', $content);
    return $content;
}

使用方法： #

1. 打开你当前主题的functions.php文件（或者用Code Snippets这类插件添加代码，避免主题更新丢失）
2. 把上面的代码粘贴进去，保存即可

方案二：全局输出缓冲替换（适配所有场景） #

如果你的iframe是通过短代码、侧边栏插件或者其他非内容区域生成的，用the_content可能覆盖不到，这时候可以用WordPress的输出缓冲功能，全局拦截页面输出并替换：

add_action('template_redirect', 'init_global_iframe_swap');
function init_global_iframe_swap() {
    // 开启输出缓冲，回调函数处理所有页面输出
    ob_start(function($buffer) {
        // 同样只替换目标iframe
        $buffer = preg_replace('/<iframe id="partnerIFrame" src="([^"]+)"/', '<iframe id="partnerIFrame" data-src="$1"', $buffer);
        return $buffer;
    });
}

这个方法会拦截整个页面的HTML输出，不管iframe出现在哪里，都能被替换掉。

后续Usercentrics配置 #

完成服务器端替换后，还需要在Usercentrics后台配置对应的服务，让它在用户同意后加载iframe：

1. 登录Usercentrics后台，找到你要配置的第三方服务（比如你的合作伙伴iframe）
2. 设置加载类型为「手动加载」
3. 添加自定义触发脚本（或者如果Usercentrics支持的话，直接配置属性替换规则）：

// 用户同意后执行，把data-src转成src
const iframe = document.getElementById('partnerIFrame');
if (iframe) iframe.src = iframe.dataset.src;

验证方法 #

添加代码后，不要直接看浏览器开发者工具（那会显示DOM修改后的状态），而是右键页面→查看页面源代码，搜索partnerIFrame，确认里面的属性是data-src而不是src——如果是，就说明服务器端替换成功了，不会有提前加载的问题。

内容来源于stack exchange