如何使用 jQuery 将 HTML 内容插入 iFrame
答案:使用jQuery contents()方法
您可以将 jQuery contents() 方法与 find(), val() 和 html() 方法结合使用，在 iframe 正文中插入文本或 HTML。
让我们试试下面的例子来了解它的基本工作原理:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery 在 iFrame 中插入 HTML</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 获取元素内的文本
