关于iframe标签的用法_electron 使用<iframe>-CSDN博客

本文链接：https://blog.csdn.net/weixin_48391812/article/details/128380251

<iframe> 标签规定一个内联框架（即行内框架)。被用来在当前 HTML 文档中嵌入另一个文档。所有的主流浏览器都支持<iframe>标签。

1、iframe的使用

通常使用iframe直接在页面嵌套iframe标签指定的src就可以了。
示例：

<iframe id="myFrame" scrolling="no" frameborder="0" src=" " style="width:100%;height:100%"></iframe>

2、获取iframe中的内容

    let iframe = document.getElementById("myFrame"); //获取iframe标签
	let iwindow = iframe.contentWindow; //获取iframe的window对象
	let idoc = iwindow.document; //获取iframe的document对象
	console.log(idoc.documentElement); //获取iframe的html
	console.log("body",idoc.body);

3、获取父页面的元素

父页面代码：

<body>
   <div id="modal-1">div内容</div>
   <iframe src="child.html"></iframe>
</body>

子页面代码（iframe）：


    let iframe = parent.document.getElementById("modal-1"）

4、iframe 子页面调用父页面的方法

父页面代码：

<body>
   <div id="default">div内容</div>
   <iframe src="child.html"></iframe>
</body>
<script>
    function test() {
        alert('Hello World!');
    }
</script>

子页面代码：

<body>
	<div>iframe子页面内容</div>
</body>
<script>
	$(function() {
		//在iframe子页面中查找父页面元素
		alert($('#default', window.parent.document).html());
		//在iframe中调用父页面中定义的变量
		alert(parent.value);
		//在iframe中调用父页面中定义的方法
		parent.test();
	});
</script>

5父页面调用子页面方法

父页面：

<iframe id="myFrame" scrolling="no" frameborder="0" src=" " style="width:100%;height:100%"></iframe>

<script>
   //当iframe加载完成，调用iframe嵌套页面方法传递参数
 //若找不到方法,可能是iframe还没有加载完成
 $("#myFrame").load(function(){
      $("#myFrame")[0].contentWindow.getParentParam(传递到子页面的参数);
 });
</script>

子页面：

function getParentParam(parentPageParam){
    方法体。。。;
}

6、iframe背景透明

父页面

<iframe id="myFrame" allowtransparency='true'></iframe>

子页面

<body style="background-color: transparent;">
   <div></div>
</body>