Question

我想在点击按钮上更新iframe的div内容（主页的内容形式textarea）。

到目前为止，我能够更新iframe的div内容（来自主页的textarea的内容），但仅在页面加载时完成，我想更改按钮上的内容。

我的脚本处理页面加载

function myFunction() {
    var x = document.getElementById("myTextarea").value;
    alert("called" + x);
    var f=$('#prev')
    f.load(function(){ 
        f.contents().find('#demo').append(x);
    }) 
}

我的脚本没有按下按钮点击，但是使用textarea的最新文本调用警报

<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">&times;</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>

modelpopup中的iframe

{{1}}

任何建议......

Answer 1

在OP代码中，没有<textarea>只是BS模式。根据OP代码，<textarea>应位于父页面上（在演示中：index.html），div#demo位于子页面上（在演示中：htmlpreview.html。）所以在演示中我们有：

包含index.html和textarea#text0

<button>

以及位于htmlpreview.html

iframe#prev

是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

＆＃13;

<!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>

＆＃13;

htmlpreview.html

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <style>
      #demo {border:3px solid red}
    </style>
  </head>

  <body>
    <div id='demo'></div>
  </body>

</html>

＆＃13;

Answer 2

以上两个脚本更改为此脚本，并且其工作完美我必须重新加载iframe make des div为空然后编辑内容。

下面是工作脚本。

function myFunction() {
        var ifr = document.getElementsByName('Right')[0];
        ifr.src = ifr.src;
        var x = document.getElementById("myTextarea").value;
        var f=$('#prev')
        f.load(function(){ 
            f.contents().find('#demo').empty();
             f.contents().find('#demo').append(x);
        }) 
    }

Answer 3

我不确定是否可以通过处理iframe的DOM来实现，如您所料。根据这个answer

但是，根据上述链接或this中的其他一些答案，您可以使用您想要的内容更改iframe的整个内容。（包括你想要的改变。）我知道这似乎不是最好的解决方案，但如果你没有找到别的东西，请记住它。

具有这种逻辑的一个链接是this。在这里，您可以获取iframe的innerHTML，并可能从字符串中找到您要更改的文字，并将新内容设置为iframe内容。

来自显示逻辑的链接的帮助代码是：

function get_iframe(ifr_id) {
  // gets the object that refers to the iframe, uasing its id

  var myIFrame = document.getElementById(ifr_id);

  // Apply the property "contentWindow" to myIFrame object
  // In this way we get the iframe content
  var content = myIFrame.contentWindow.document.body.innerHTML;
  alert("Content: \n" + content);           // Displays an Alert with the data from iframe

  // Define a new text that will replace the content of the iframe
  content = '<font color="blue">Text added with Javascript, from the main page</font>';

  // Modify the iframe content
  myIFrame.contentWindow.document.body.innerHTML = content;
}

更新按钮上iframe的div内容

3 个答案:

的index.html

htmlpreview.html