使用 jQuery 更改 iFrame 的 HTML?
Posted
技术标签:
【中文标题】使用 jQuery 更改 iFrame 的 HTML?【英文标题】:Change HTML of an iFrame with jQuery? 【发布时间】:2011-08-20 23:06:21 【问题描述】:有没有办法使用 jQuery 来操作来自同一域的 iframe 的 html?
感谢您的帮助。
【问题讨论】:
【参考方案1】:您必须解析 iframe 内容。
$("#frameid").contents().find("div").html('My html');
更多:http://api.jquery.com/contents/
【讨论】:
由于某些原因似乎不起作用。我的代码<html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript">$(document).ready(function() $("#frameDemo").contents().find("div").html(); );</script> </head> <body> <iframe src="iframe.html" id='frameDemo'></iframe> </body> </html>
和 iframe:<html> <head> </head> <body> <div></div> </body> </html>
@Stephen Ou:我有点困惑为什么这个答案有 +5 而我的有 0 尽管提供了完全相同的解决方案,但无论如何......你实际上并没有做任何事情您发布的那个 sn-p 中的 HTML。如果要设置 div 的 HTML,则需要将字符串传递给 html()
函数,例如:html("new HTML")
。您在 sn-p 中所做的是获取 div 的 HTML(无论如何都是空的)并且不对其进行任何操作。【参考方案2】:
您可以使用contents()
来操作iframe
的内容。
$("#frameDemo").contents().find("div").html("new HTML content goes here");
【讨论】:
【参考方案3】:这是来自the jQuery documentation的示例:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<iframe src="http://api.jquery.com/" id='frameDemo'></iframe>
<script>$("#frameDemo").contents().find("a").css("background-color","#BADA55");</script>
</body>
</html>
【讨论】:
【参考方案4】:如果要更改 iframe 的 <body>
标签内的内容,可以使用以下代码:
$("#iframe_id").contents().find("body").html('my_new_content');
【讨论】:
以上是关于使用 jQuery 更改 iFrame 的 HTML?的主要内容,如果未能解决你的问题,请参考以下文章
使用 jQuery 更改和加载 iframe ‘src’ 属性