父级和子级iframe的一些交互

一。子级iframe执行父级页面的一些操作

可以使用window.parent直接执行或调用父级的元素和函数

直接看这篇吧

 

二、父级执行子级iframe页面的一些操作

<iframe id="XulgriFrame" src="https://xulgr.com/"></iframe>

<button id="XulgriButton1">修改iframe内部的元素</button>
<button id="XulgriButton2">执行iframe内部的脚本</button>

<script>
// 修改iframe内部的元素
$('#XulgriButton1').click(function(){
	let XulgriFrame = $('#XulgriFrame');
	let content = XulgriFrame.contents(); // contents()方法是主要的
	content.find('.xulgr').text('修改xulgr类的文本内容'); // .xulgr为iframe页面里的元素
	//content.find('.button').click(); // 点击iframe页面里的类button
});

// 执行iframe内部的脚本
$('#XulgriButton2').click(function(){
	let XulgriFrame = $('#XulgriFrame')[0]; // 原生JS可以直接用document.getElementById()选择器
	let content = XulgriFrame.contentWindow; // contentWindow方法是主要的
	content.XulgrFunction(); // XulgrFunction()为iframe页面里的函数或脚本
});
</script>