web-dev-qa-db-fra.com

jQuery change le contenu d'un iFrame

Je suis complètement nouveau à l'aide de jQuery. Pourquoi ça ne marche pas?

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

En outre, je prévois d’utiliser cette iFrame pour présenter à un utilisateur un aperçu des modifications apportées à un fichier HTML. Je vais vider l'intégralité de l'iFrame chaque fois qu'une modification est apportée ou, si je peux comprendre comment, changer des lignes particulières à l'aide de jQuery. Est-ce la meilleure façon de s'y prendre?

jqueryiframe
29
mavix

Si vous souhaitez mettre à jour le contenu iframe à l'aide de HTML, vous devez d'abord rechercher l'élément body dans la iframe, puis ajouter le balisage requis.

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

Démo de travail - http://jsfiddle.net/ShankarSangoli/a7r9L/

48
ShankarSangoli

J'ai créé un script PHP pouvant extraire tout le contenu de l'autre site Web. Le plus important est que vous pouvez facilement appliquer votre jQuery personnalisé à ce contenu externe. Veuillez vous reporter au script suivant pour obtenir tous les contenus de l’autre site Web, puis vous pourrez également appliquer votre cusom jQuery/JS. Ce contenu peut être utilisé n'importe où, à l'intérieur de tout élément ou de toute 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;
}
0
Ahsan Horani