您的位置：首页 > Web前端 > HTML

点击按钮button触发修改div的iframe内容（修改iframe的src内容）

2016-09-23 16:37 645 查看

新建一个html文件，比如test.html，之后将如下内容复制进文件，然后用浏览器打开该html文件即可

<html>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<title>div中动态嵌入iframe内容</title>
</head>
<body>
<table style="height: 100%;width: 100%">
<tr>
<td>
<button type="button" onclick="click1()">button1</button>
<br>
<button type="button" onclick="click2()">button2</button>
<br>
<button type="button" onclick="click3()">button3</button>
</td>
<td>
<div id="desdiv" style="width: 1000px;height: 400px;">
<span>初始化</span>
</div>
</td>
</tr>
</table>
<script>
function click1() {
alert("click1");
document.getElementById('desdiv').innerHTML = "<span>变更后</span>";
}
function click2() {
alert("click2");
document.getElementById('desdiv').innerHTML = "<iframe src='http://www.baidu.com'"+"style='width: 100%;height: 100%;'"+"></iframe>";
}
function click3() {
alert("click3");
document.getElementById('desdiv').innerHTML = "<iframe src='http://www.sina.com'"+"style='width: 1000px;height: 400px;'"+"></iframe>";
}
</script>
</body>
</html>

jsp文件同理

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html iframe

相关文章推荐

新的分享

章节导航

点击按钮button触发修改div的iframe内容 （修改iframe的src内容）

点击按钮button触发修改div的iframe内容（修改iframe的src内容）