Подтвердить что ты не робот

JQuery изменение содержимого iFrame

Я совершенно новый для использования jQuery. Почему это не работает?

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

Кроме того, я планирую использовать этот iFrame, чтобы представить пользователю предварительный просмотр изменений в html файле. Я собираюсь либо очистить весь iFrame каждый раз, когда внесено изменение, либо, если я могу понять, как это сделать, измените конкретные строки, используя jQuery. Это лучший способ сделать это?

Ответ 1

Если вы хотите обновить содержимое iframe с помощью html, тогда вы должны сначала найти элемент body внутри iframe, а затем добавить требуемую разметку.

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

Рабочая демонстрация - http://jsfiddle.net/ShankarSangoli/a7r9L/

Ответ 2

Я создал PHP-скрипт, который может получить все содержимое с другого веб-сайта, и наиболее важной частью является то, что вы можете легко применить свой пользовательский jQuery к этому внешнему контенту. Пожалуйста, обратитесь к следующему сценарию, который может получить все содержимое с другого сайта, а затем вы также можете применить свой cusom jQuery/JS. Этот контент может быть использован где угодно, внутри любого элемента или любой страницы.

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