如何使用 jQuery 将 HTML 内容插入 iFrame
答案:使用jQuery contents()
方法
您可以将 jQuery contents()
方法与 find()
, val()
和 html()
方法结合使用,在 iframe 正文中插入文本或 HTML。
让我们试试下面的例子来了解它的基本工作原理:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Insert HTML inside an iFrame</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
textarea, iframe{
display: block;
margin: 10px 0;
}
</style>
<script>
function updateIframe(){
var myFrame = $("#myframe").contents().find('body');
var textareaValue = $("textarea").val();
myFrame.html(textareaValue);
}
</script>
</head>
<body>
<textarea rows="5" cols="50" placeholder="Type HTML or text here..."></textarea>
<button type="button" onclick="updateIframe()">Insert Content</button>
<iframe id="myframe"></iframe>
</body>
</html>
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
- 如何使用 JavaScript 检测 iframe 内的点击
- 如何使用 JavaScript 根据其内容自动调整 iFrame 高度
- 如何在使用 jQuery 输入 textarea 时自动更新 DIV 内容
- 如何使用 jQuery 获取元素内的文本
Advertisements