JQuery使用iframe子页面操作父页面中的元素与方法
在父页面中,你可以通过jQuery选择器选择元素,并操作它们。如果你想要从子页面(iframe中的页面)调用父页面的函数或者修改父页面的元素,你需要首先获取子页面的window对象,然后就可以像在普通页面中一样进行操作了。
以下是一个示例代码:
父页面(假设有一个id为parentElement
的元素和一个名为parentFunction
的函数):
<div id="parentElement">父页面元素</div>
<script>
function parentFunction() {
alert('父页面函数被调用');
}
</script>
子页面(在iframe中):
<button id="callParentFunction">调用父页面函数</button>
<button id="changeParentText">改变父页面元素文本</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('#callParentFunction').click(function() {
// 调用父页面的函数
window.parent.parentFunction();
});
$('#changeParentText').click(function() {
// 改变父页面的元素文本
window.parent.$('#parentElement').text('新的文本');
});
});
</script>
在子页面中,当你点击按钮时,会根据id调用父页面的相应函数或者改变父页面元素的内容。注意,window.parent
是获取父页面的window对象的引用,而$
是jQuery的别名,通过window.parent.$
,子页面获得了父页面中jQuery的使用权。
评论已关闭