我想在点击按钮时更新 iframe 的 div 内容(主要页面的内容形式 textarea)。
到目前为止，我可以更新 iframe 的 div 内容(来自主页文本区域的内容)，但它仅在页面加载时完成，我想更改按钮上的内容。
我的脚本处理页面加载
$(function(){
var x = document.getElementById("myTextarea").value;
var f=$('#prev')
f.load(function(){
f.contents().find('#demo').append(x);
})
})
我的脚本在单击按钮时不起作用，但使用文本区域中的最新文本调用警报
function myFunction() {
var x = document.getElementById("myTextarea").value;
alert("called" + x);
var f=$('#prev')
f.load(function(){
f.contents().find('#demo').append(x);
})
}
modelpopup 中的 iframe
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg" style="width:90%;height:100%!important;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Html Preview</h4>
<button type="button" class="btn btn-default" onclick="myFunction()">Refresh</button>
</div>
<div class="modal-body">
<iframe id="prev" src="http://localhost:8084/page/htmlpreview" style="border:none;width:100% !important;height:1025px!important;"><p>Your browser does not support iframes.</p></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
任何建议...
最佳答案
OP代码中没有<textarea>只是一个 BS 模态。根据 OP 代码 <textarea>应该在父页面上(在演示中:index.html)和 div#demo在子页面上(在演示中:htmlpreview.html。)所以在演示中我们有:
父页面 (
index.html) 与textarea#text0和一个<button>以及位于
htmlpreview.html中的子页面 (iframe#prev)关于 child 的是
div#demo
当
<button>单击 onevent 属性调用事件处理程序xFunction().当
xFunction()被调用它将:获取
textarea#text0的值[var x = $('#text0').val();]访问
iframe#prev内容 [$('#prev')..contents()...]然后找到
div#demo[....find('#demo')...]并设置
div#demo文本内容为textarea#text0的值[....text(x)]
由于 SO 安全措施，该演示无法运行。查看此 Plunk 代替。
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id='text0' rows='5' cols='70'></textarea>
<button type="button" onclick="xFunction()">Refresh</button>
<iframe id="prev" src="htmlpreview.html"></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function xFunction() {
var x = $("#text0").val();
$('#prev').contents().find('#demo').text(x);
}
</script>
</body>
</html>html预览.html
<!DOCTYPE html>
<html>
<head>
<style>
#demo {border:3px solid red}
</style>
</head>
<body>
<div id='demo'></div>
</body>
</html>关于javascript - 更新按钮上 iframe 的 div 内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49798142/