我想更改我的iframe内容,但我不明白
<html>
<head>
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<iframe id="frame" width="100%" height="95%" src="http://google.com"></iframe>
<script type=text/javascript >
$('#frame').contents().find( "body" ).html('<p>hi</p>')
</script>
</body>
</html>
使用此代码,我总是拥有自己的google页面,而不是带有hi的ifram
答案 0 :(得分:5)
<script type="text/javascript">
$(document).ready(function(){
$('#frame').on('load', function() {
$(this).contents().find( "body" ).html('<p>hi</p>');
});
});
</script>
虽然这是正确的,但是当您尝试修改外部资源的主体时,内容永远不会改变。由于跨站点脚本规则,您无法执行此操作。
修改
唯一的方法是执行@ user1153551所做的操作并替换整个文档。
答案 1 :(得分:3)
您必须在iframe文档中使用load事件并调用包含文档中的加载函数来替换正文包含。
$('#frame').load(function() {
$('#frame').replaceWith('<p>hi</p>');
});
<iframe id="frame" width="100%" height="95%" src="http://w3schools.com"></iframe>
使用 .replaceWith() jQuery方法。
答案 2 :(得分:-1)
<script type=text/javascript >
$(document).ready(function(){
$('#frame').on('load', function() {
$(this).contents().find( "body" ).html('<p>hi</p>');
});
});
</script>