CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
M Hamza Javed
M Hamza Javed

Reputation: 1265

update div content of iframe on button

i want to update div content (content form textarea of main page) of iframe on button click.

up till now i'm able to update div content (content from textarea of main page) of iframe but its done only on page load, i want to change content on button.

my script working on page load

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

my script not-working on button click but alert called with latest text from textarea

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

iframe in modelpopup

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

any suggestions...

Upvotes: 2

Views: 1139

Answers (3)

M Hamza Javed
M Hamza Javed

Reputation: 1265

The above two scripts change to this one script and its working perfect i have to reload iframe the make desire div empty then edit content.

below is the working script.

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);
        }) 
    }

Upvotes: 0

zer00ne
zer00ne

Reputation: 43880

In the OP code there's no <textarea> just a BS modal. According to the OP code the <textarea> should be on the parent page (in demo: index.html) and the div#demo is on the child page (in demo: htmlpreview.html.) So in the demo we have:

  • the parent page (index.html) with textarea#text0 and a <button>

  • and the child page (htmlpreview.html) that resides within iframe#prev

  • on the child is div#demo

  • When the <button> is clicked the onevent attribute invokes the event handler xFunction().

  • When xFunction() is invoked it will:

    • get the value of textarea#text0 [var x = $('#text0').val();]

    • access iframe#prev contents [$('#prev')..contents()...]

    • then find div#demo [....find('#demo')...]

    • and set div#demo text content to the value of textarea#text0 [....text(x)]

The demo doesn't function due to SO security measures. Review this Plunk instead.

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>

htmlpreview.html

<!DOCTYPE html>
<html>

  <head>
    <style>
      #demo {border:3px solid red}
    </style>
  </head>

  <body>
    <div id='demo'></div>
  </body>

</html>

Upvotes: 2

Anastasios Selmani
Anastasios Selmani

Reputation: 3699

I am not sure this can be done by handling the DOM of the iframe as you might expect. According to this answer

However according to some other answers in the above link or this you could change the entire content of the iframe with what the content you want. (Including the change that you want.) I know this doesn't seem as the best solution but keep it in mind in case you don't find anything else.

One link with such a logic is this. Here you can get the innerHTML of the iframe and possibly find from the string the literal you want to change and set the new content as the iframe content.

The helping code from the link that shows the logic is this:

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;
}

Upvotes: -1

Related Questions