跨页面动态设置iframe SRC：如何传递data-iframe-src参数？

你的问题核心在于原JS代码试图在PAGE-1中操作PAGE-2的元素，但PAGE-1加载时PAGE-2的#frame根本不存在，而且跳转到PAGE-2后，PAGE-1的JS不会在新页面环境中运行，所以完全失效。我们需要通过跨页面传递参数的方式来实现需求，下面是两种可靠的方案：

方案一：通过URL参数传递（推荐，支持页面刷新/分享） #

步骤1：修改PAGE-1的点击事件处理 #

拦截链接跳转，提取data-iframe-src中的参数，拼接到PAGE-2的URL中：

$(".map-button").click(function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    
    // 获取链接上的data-iframe-src属性值
    const iframeSrc = $(this).attr('data-iframe-src');
    // 解析URL参数
    const urlParams = new URL(iframeSrc).searchParams;
    
    // 构建PAGE-2的跳转URL，带上需要的参数（注意去掉max-levels，和你的需求一致）
    const page2Url = '/PAGE-2/?' + new URLSearchParams({
        shopId: urlParams.get('shopId'),
        type: urlParams.get('type'),
        point: urlParams.get('point')
    }).toString();
    
    // 跳转到PAGE-2
    window.location.href = page2Url;
});

步骤2：在PAGE-2中读取参数并生成iframe #

页面加载时，从URL参数中提取值，动态设置iframe的src：

$(document).ready(function() {
    // 获取当前页面的URL参数
    const urlParams = new URLSearchParams(window.location.search);
    
    // 提取所需参数
    const shopId = urlParams.get('shopId');
    const type = urlParams.get('type');
    const point = urlParams.get('point');
    
    // 构建最终的iframe src
    const finalIframeSrc = `http://myappwebsite/resourcesiframe?shopId=${shopId}&type=${type}&point=${point}`;
    
    // 处理iframe：如果页面已有#frame元素则更新src，否则创建新元素
    if ($('#frame').length) {
        $('#frame').attr('src', finalIframeSrc);
    } else {
        const iframe = $(`<iframe id="frame" src="${finalIframeSrc}" width="XXX" height="XXX"></iframe>`);
        // 把iframe添加到页面的目标容器中（比如body或指定div）
        $('body').append(iframe);
    }
});

方案二：通过SessionStorage传递（不暴露参数在URL） #

如果不想把参数显示在URL中，可以用浏览器的sessionStorage临时存储参数：

步骤1：PAGE-1的点击事件处理 #

$(".map-button").click(function(e) {
    e.preventDefault();
    
    const iframeSrc = $(this).attr('data-iframe-src');
    const urlParams = new URL(iframeSrc).searchParams;
    
    // 把参数存储到sessionStorage
    sessionStorage.setItem('iframeConfig', JSON.stringify({
        shopId: urlParams.get('shopId'),
        type: urlParams.get('type'),
        point: urlParams.get('point')
    }));
    
    // 跳转到PAGE-2
    window.location.href = '/PAGE-2/';
});

步骤2：PAGE-2中读取存储的参数 #

$(document).ready(function() {
    // 从sessionStorage读取参数
    const iframeConfig = JSON.parse(sessionStorage.getItem('iframeConfig'));
    
    if (iframeConfig) {
        const finalIframeSrc = `http://myappwebsite/resourcesiframe?shopId=${iframeConfig.shopId}&type=${iframeConfig.type}&point=${iframeConfig.point}`;
        
        // 生成或更新iframe
        if ($('#frame').length) {
            $('#frame').attr('src', finalIframeSrc);
        } else {
            const iframe = $(`<iframe id="frame" src="${finalIframeSrc}" width="XXX" height="XXX"></iframe>`);
            $('body').append(iframe);
        }
        
        // 用完后清除存储，避免下次进入PAGE-2时残留旧参数
        sessionStorage.removeItem('iframeConfig');
    }
});

关键说明 #

• 两种方案的核心都是在PAGE-1把参数传递到PAGE-2，而不是直接操作跨页面元素
• URL参数方案更灵活，支持用户刷新页面或分享链接；SessionStorage方案更隐蔽，但用户直接访问PAGE-2时无法获取参数

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