如何将URL参数传递至iframe的src属性实现页面加载？

嘿，我来帮你搞定这个需求！根据你描述的场景——已经生成了带参数的新链接，现在要点击它把路径传给iframe的src来加载页面，下面是基于jQuery的具体实现步骤，完全适配你的现有代码：

1. 先整理你的链接结构 #

首先，把你生成的新链接改成这种带自定义属性的格式（这样更方便后续获取路径，还不会触发默认跳转）：

<!-- 示例链接，data-path里存你要传给iframe的路径部分 -->
<a href="#" class="iframe-nav-link" data-path="/Manual/page1.htm">打开页面1</a>
<a href="#" class="iframe-nav-link" data-path="/Manual/page2.htm">打开页面2</a>

如果你的链接是从主URL追加参数生成的，也可以把参数里的路径提取出来存在data-path里，或者直接从href里解析，不过用data属性是最直观好维护的方式。

2. 编写jQuery事件逻辑（对接你已有的代码） #

把这段代码加到你现有的$(document).ready()函数里就行：

$(document).ready(function () {
    // 这里用你已经解析好的主URL变量就行，不用重复写
    var mainURL = 'https://www.site-name.com'; 

    // 给所有目标链接绑定点击事件
    $('.iframe-nav-link').on('click', function(e) {
        // 先阻止链接默认的跳转行为，不然页面会跳走
        e.preventDefault();
        
        // 从当前点击的链接里拿到要加载的路径
        var targetPath = $(this).data('path');
        
        // 拼接完整URL，更新iframe的src属性
        $('#load').attr('src', mainURL + targetPath);
    });
});

3. 关键细节说明 #

• 为什么阻止默认行为？：因为你的链接href是#或者带参数的主URL，点击默认会跳转页面，用e.preventDefault()就能只更新iframe，不刷新整个页面。
• 复用你已有的主URL：你之前解析好的主URL直接替换这里的mainURL变量就行，保持代码一致性。
• 如果链接是带参数的URL怎么办？：比如你的新链接是https://your-page.com?target=/Manual/page3.htm，那可以加个参数解析函数，从URL里提取路径：

// 辅助函数：获取URL里的指定参数
function getUrlParam(paramName) {
    return new URLSearchParams(window.location.search).get(paramName);
}

// 页面加载时如果有参数就自动加载对应页面
$(document).ready(function () {
    var mainURL = 'https://www.site-name.com';
    var autoLoadPath = getUrlParam('target');
    
    if (autoLoadPath) {
        $('#load').attr('src', mainURL + autoLoadPath);
    }

    // 点击带参数的链接时也能处理
    $('.param-link').on('click', function(e) {
        e.preventDefault();
        // 从点击的链接href里解析参数
        var pathParam = new URLSearchParams($(this).attr('href').split('?')[1]).get('target');
        $('#load').attr('src', mainURL + pathParam);
    });
});

这样不管是点击自定义链接，还是通过URL参数直接加载，都能完美实现你要的效果。

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