38

I'm completely new to using jQuery. Why isn't this working?

<iframe width="800" scrolling="no" id="prev" src="">your browser needs to be updated.
</iframe>
<script src="jquery.js"></script>
<script>
    //var c = 0;
    $(document).ready(function() {
        $('#prev').contents().html("<html><body><div> blah </div></body></html>");
    })
</script>

Also, I am planning on using this iFrame to present a preview of changes to an html file to a user. I am going to either empty the entire iFrame every time a change is made or, if I can figure out how to do so, change particular lines using jQuery. Is that the best way to go about this?

mavix
  • 2,488
  • 6
  • 30
  • 52
  • 1
    You can look at this post here a see the available options http://stackoverflow.com/questions/139118/javascript-iframe-innerhtml – Diego Garcia Feb 28 '12 at 22:44

3 Answers3

68

If you want to update the iframe content using html then you should first find the body element inside the iframe and then append the required markup.

$(document).ready(function() {
    $('#prev').contents().find('body').html('<div> blah </div>');
});

Working demo - http://jsfiddle.net/ShankarSangoli/a7r9L/

ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
  • This works fine but if we have a CSS link tag, that is not considered in IE10 but works fine in IE11. Any idea how to fix? Like `$('#prev').contents().find('body').html('
    blah
    ');`     – Riz Oct 19 '15 at 10:28
  • @shankarSangoli Why we are using contents() function ? if finding body can work? Can we make it work without .content() ? – Santosh Dec 29 '16 at 13:25
  • 1
    @Santosh I believe the `contents()` is advisable to use because you don't have to worry about cross browser issues to find the right document element. – ShankarSangoli Jan 26 '17 at 16:12
3

I have created a PHP script that can get all the contents from the other website, and most important part is you can easily apply your custom jQuery to that external content. Please refer to the following script that can get all the contents from the other website and then you can apply your cusom jQuery/JS as well. This content can be used anywhere, inside any element or any page.

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
    Function to display frame from another domain 
*/

function displayFrame()
{
    $webUrl = 'http://[external-web-domain.com]/';

    //Get HTML from the URL
    $content = file_get_contents($webUrl);

    //Add custom JS to returned HTML content
    $customJS = "
    <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
      //Hide Navigation bar
      jQuery(\".navbar.navbar-default\").hide();

    </script>";

    //Append Custom JS with HTML
    $html = $content . $customJS;

    //Return customized HTML
    return $html;
}
Ahsan Horani
  • 239
  • 2
  • 13
  • Curious how resource heavy is this? If you're grabbing all of the pages content, modifying it then replacing it, how is the data handled, is it possible to be cached so it only needs to be done once? – GibsonFX Feb 21 '20 at 09:36
  • Yes, this can be fetched and stored in custom cache. After first attempt, it will retrieve data from the custom cache – Ahsan Horani Mar 06 '20 at 10:39
0
var monitor = setInterval(function(){
    var elem = document.activeElement;
    if(elem && elem.tagName == 'IFRAME'){
        var thanks = $(elem).contents().find('.thank-page__title').html();
        if (thanks && thanks.indexOf('Спасибо') !== -1) {
            setYandexTarget('reika-kviz');
            clearInterval(monitor);
        }
    }
}, 1000);
Renderlife
  • 50
  • 4
  • Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/349538) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you’ve made. – jasie Feb 10 '22 at 09:05