jQuery 更改 iFrame 的内容
Posted
技术标签:
【中文标题】jQuery 更改 iFrame 的内容【英文标题】：jQuery changing contents of an iFrame 【发布时间】：2012-03-18 10:53:54 【问题描述】：我对使用 jQuery 完全陌生。为什么这不起作用？
<iframe 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 更改特定行。这是解决这个问题的最佳方法吗？
【问题讨论】：
您可以在此处查看此帖子并查看可用选项***.com/questions/139118/javascript-iframe-innerhtml 【参考方案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您的回答添加一些解释，包括您所做的假设。以上是关于jQuery 更改 iFrame 的内容的主要内容，如果未能解决你的问题，请参考以下文章
jQuery 内容（）更改 iframe 的 html 在 Firefox 中消失
根据内部更改的内容动态调整 jQuery Fancybox 的 iframe 高度