iframe传参url

### 如何通过URL向iframe传递参数 为了实现在网页加载时自动读取当前页面的URL参数，并将其附加到iframe的`src`属性中，可以采用JavaScript来解析URL并修改iframe的内容。 #### 解析URL中的查询字符串 当用户访问带有特定参数的链接（例如 `/工程名/xxx.html?para=paravalue`），可以通过浏览器内置的方法获取这些参数。具体来说，使用 `window.location.search` 可以得到整个查询串部分[^1]： ```javascript // 获取完整的查询字符串 const queryString = window.location.search; console.log(queryString); // 输出 "?para=paravalue" ``` 接着利用 URLSearchParams 对象处理这个查询字符串，提取出所需的键值对： ```javascript // 创建一个新的 URLSearchParams 实例 const params = new URLSearchParams(queryString); // 遍历所有的 key-value pairs 或者直接获取指定key的value for (let param of params.entries()) { console.log(`${param[0]}=${param[1]}`); } // 如果只需要某个具体的参数，则可以直接调用 get 方法 const paraValue = params.get('para'); console.log(paraValue); ``` #### 动态设置Iframe源地址 一旦获得了必要的参数之后，就可以构建新的 iframe 的 src 属性值了。假设目标是将上述获得的 `paraValue` 添加到 iframe 中作为其一部分路径的一部分: ```html <iframe id="reportFrame"></iframe> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { const frameElement = document.getElementById('reportFrame'); let baseUrl = "http://example.com/report?"; // 假设已经得到了 para 参数 const paraParam = encodeURIComponent(`para=${paraValue}`); // 更新 iframe 的 src 属性 frameElement.src = `${baseUrl}${paraParam}`; }); </script> ``` 这种方法允许灵活地根据不同的请求调整嵌入式内容而无需硬编码固定的资源位置。 另外一种更简洁的方式是在HTML模板里直接插入表达式语法，如Vue.js框架下的做法所示[^3]: ```vue <!-- Vue 组件 --> <template> <div class="container"> <!-- 使用插值表达式绑定数据 --> <iframe :src="'http://127.0.0.1/demo?' + $route.query.params" ref="iframe"></iframe> </div> </template> <script> export default { name: 'ReportViewer', }; </script> ``` 此代码片段展示了如何在一个基于Vue的应用程序中动态改变iframe的来源，这里 `$route.query.params` 是由路由配置提供的查询参数集合。 对于某些场景下可能还需要考虑跨域资源共享(CORS)策略以及安全性问题，确保服务器端正确设置了响应头以便客户端能够安全地发起请求和接收响应。