jQuery 更改 iFrame 的内容答案

【问题标题】：jQuery changing contents of an iFramejQuery 更改 iFrame 的内容
【发布时间】：2012-03-18 10:53:54
【问题描述】：

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

【问题讨论】：

您可以在此处查看此帖子并查看可用选项stackoverflow.com/questions/139118/javascript-iframe-innerhtml

标签： jquery iframe

【解决方案1】：

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

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

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

【讨论】：

这工作正常，但如果我们有一个 CSS 链接标签，在 IE10 中不会考虑，但在 IE11 中工作正常。知道如何解决吗？喜欢$('#prev').contents().find('body').html('<link href="/css/style_common.css" rel="stylesheet" type="text/css" /><div> blah </div>');
@shankarSangoli 为什么我们使用 contents() 函数？如果找到身体可以工作？我们可以在没有 .content() 的情况下让它工作吗？
@Santosh 我相信contents() 是可取的，因为您不必担心跨浏览器问题即可找到正确的文档元素。

【解决方案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;
}

【讨论】：

很好奇资源有多大？如果你抓取所有页面内容，修改然后替换它，数据是如何处理的，是否可以缓存所以只需要做一次？
是的，这可以获取并存储在自定义缓存中。第一次尝试后，它将从自定义缓存中检索数据

【解决方案3】：

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

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。