Mid*_*one 7 javascript iframe jquery
如果我运行以下代码,则删除body和head标签.
<iframe src='blank.htm'>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
test
</body>
</html>
</iframe>
<script>
$('iframe').load(function () {
var contents = $('iframe').text();
$('iframe').contents().find('html').html(contents);
});
</script>
如果我然后删除样式标记,一切都会正确显示.为什么这样,我怎么能让它停止去除头部和身体标签？我希望内容按原样填充,无需任何操作.
gui*_*ler 16
我有同样的问题,并从这个问题中学习,实际上它是浏览器进行剥离,作为其解析innerHTML属性的一部分,这是jQuery内部使用的.html().
相反,问题实际上是jQuery使用中间的新DIV,我认为不允许包含某些标签,从而导致剥离.
然后到解决方案.它就像直接设置元素的innerHTML属性一样简单html,如下所示:
// This forcibly removes head, body, and other tags, since it internally uses an empty DIV and its innerHTML property
jQuery(targetElement).html(exitHtml);
// This works fine
h = document.getElementsByTagName('html')[0];
h.innerHTML = htmlString;
为了您的具体情况,只是针对html元素内的iframe.您的最终代码可能是:
<script>
$('iframe').load(function () {
var contents = $('iframe').text();
iframeHtml = $('iframe').contents().find('html').get(0);
iframeHtml.innerHTML = contents;
});
</script>
您可以按照以下步骤了解如何将 iframe 内容复制到字符串、修改它以及在 iframe 中替换它。这些步骤应在 Chrome 调试器中执行，仅用于教育/演示目的。一旦您了解了该过程，您就可以尝试在网站上复制代码。
在 Chrome 调试器中一次运行一个函数：
// test iframe I loaded in a sandbox also at http://example.com
$('body div:first').before('<iframe src="http://example.com/company"></iframe>');
// retrieved the body of the iframe - I cloned it so I could perform operations
// on the copy without bothering the iframe content.
iBody = $('iframe:first').contents().find('body').clone();
// got the head
iHead = $('iframe:first').contents().find('head').html();
// if there is script in the body, it really messes things up. So in my tests,
// I had to remove it before adding it back to the iframe.
iBody.find("script").remove();
// verify there are no script elements
ibody.html();
// replace the iframe head
$('iframe:first').contents().find('head').html(iHead);
// replace the iframe body first with a placeholder. The body is the sensitive
// part. If you destroy the DOM, it can make the entire page, including
// the parent, turn completely white.
$('iframe:first').contents().find('body').html('<div></div>');
// ** inserted something in the copy to prove we modified it!!
iBody.append("<div style='position:absolute;z-index:5000; color:red; " +
"background-color:white;'>JAMES WAS HERE</div>");
// now replace the body
$('iframe:first').contents().find('body').html(iBody);
在网站底部的 iframe 内，我看到我的消息在白色背景上呈红色。我也可以在源码中看到它：
$('iframe:first').contents().find('body').html();
我在一个匿名网站上执行了这些操作，使用 Chrome 的调试器控制台来运行命令。第一个命令在主页中创建一个 iframe，并在 iframe 中创建网站的公司页面。其余命令获取该 iframe 的头部和主体，克隆主体，向主体克隆添加一些内容（例如“JAMES WAS HERE”消息），然后用该副本替换 iframe 主体。
我还通过在浏览器中加载http://getsatisfaction.com并在 iframe 中加载http://getsatisfaction.com/explore/product-innovation来验证相同的结果。通过重复上述步骤，我看到了我的消息“JAMES WAS HERE”。
**我遇到的最严重的问题是无法在副本中保留 JavaScript 或 CSS 样式标签。样式的解决方案是在将正文添加回 iframe之前进行所有样式修改。**
由于某种原因，浏览器尝试运行 JavaScript 并抛出错误。这些错误的上下文让我认为 JavaScript 是在顶级上下文而不是 iframe 上下文中运行的！这对你来说可能是一个大问题。您可能需要想出另一个计划来在弹出窗口或内嵌中显示预览。此外，在使用不同 JavaScript 的不同网站上，这可能会有不同的表现。它在 IE 中也可能表现得很奇怪。
简而言之，我实际上并不认为该解决方案能够支持生产网站，因为必须在 iframe 中删除 JavaScript；但是，根据您的需求，如果您不需要 iframe DOM 来使用任何 JavaScript，则可以在生产环境中实现此功能。
尽管如此，这是一个值得探索的有趣问题！
| 归档时间： |
|
| 查看次数： |
5187 次 |
| 最近记录： |