父页面有个按钮,点击此按钮传参给iframe,并且刷新iframe内容 代码怎么实现
时间: 2023-07-06 15:05:37 浏览: 54
可以通过以下步骤实现:
1. 在父页面中,添加一个按钮,并绑定一个点击事件。
```html
<button id="btn">传参并刷新iframe</button>
```
```javascript
var btn = document.querySelector('#btn');
btn.addEventListener('click', function() {
// 传参并刷新iframe
});
```
2. 获取iframe元素,并设置其src属性,同时传入参数。
```javascript
var iframe = document.querySelector('iframe');
iframe.src = 'iframe.html?param=value';
```
3. 在iframe页面中,通过location.search获取传入的参数,并根据参数来更新内容。
```javascript
var params = new URLSearchParams(location.search);
var paramValue = params.get('param');
// 根据参数更新内容
```
4. 当需要刷新iframe中的内容时,可以通过重新设置src属性来实现。
完整代码如下:
```html
<!-- 父页面 -->
<button id="btn">传参并刷新iframe</button>
<iframe src="iframe.html"></iframe>
<script>
var btn = document.querySelector('#btn');
var iframe = document.querySelector('iframe');
btn.addEventListener('click', function() {
iframe.src = 'iframe.html?param=value';
});
</script>
```
```html
<!-- iframe页面 -->
<div id="content">初始内容</div>
<script>
var params = new URLSearchParams(location.search);
var paramValue = params.get('param');
if (paramValue === 'value') {
var content = document.querySelector('#content');
content.innerHTML = '更新后的内容';
}
</script>
```