Question

我对使用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更改特定行。这是最好的解决方法吗？

Answer 1

如果您想使用html更新iframe内容，则应首先在body中找到iframe元素，然后附加所需的标记。

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

工作演示 - http://jsfiddle.net/ShankarSangoli/a7r9L/

Answer 2

我创建了一个PHP脚本，可以从其他网站获取所有内容，最重要的部分是您可以轻松地将自定义jQuery应用于该外部内容。请参考以下脚本，该脚本可以从其他网站获取所有内容，然后您也可以应用自定义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;
}

jQuery更改iFrame的内容

2 个答案: