iframe方法

js调用父窗口函数-iframe父窗口和子窗口相互的调用方法

iframe父窗口和子窗口相互的调用方法解决方案[详细][全]来源:互联网收集分享:QQ1663551688

iframe父窗口和子窗口相互的调用方法集锦一、父窗口调用iframe子窗口方法

1、HTML语法：

2、父窗口调用子窗口：myFrame.window.functionName();

3、子窗品调用父窗口：parent.functionName();

简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行

4、父窗口页面源码：

functionsay(){

alert("parent.html------>I'matparent.html");

}

functioncallDhild()

{

//document.frames("myFrame").f1();

myFrame.window.say();

}

5、子窗口页面：

functionsay()

{

alert("child.html--->I'matchild.html");

}

functioncallParent(){

parent.say();

}

二、iframe父窗口和子窗口相互的调用方法1、IE中使用方法：父窗口调用子窗口：iframe_ID.iframe_document_object.object_attribute=attribute_value

例子：onDlick="iframe_text.myH1.innerText='";

子窗口调用父窗口：parent.document.getElementById("parent_document_object").object_attribute=attribute_value

iframe 跨域 调用 js 方法

摘要：

1.IFrame 跨域原理简介

2.调用 JavaScript 方法的方式

3.跨域策略解决方案

4.示例代码及解析

正文：

在前端开发中，IFrame 跨域调用 JavaScript 方法是一个常见的问题。本文将详细介绍 IFrame 跨域原理、调用 JavaScript 方法的方式，以及解决跨域问题的策略。最后通过示例代码进行解析，帮助大家更好地理解和应用。

一、IFrame 跨域原理简介

IFrame 跨域实际上是基于同源策略（Same-Origin Policy）的。同源策略是浏览器为了保护用户信息安全而设立的一种机制，它限制了来自不同源的资源相互交互。这里的“源”指的是协议、域名和端口号。当请求的源与响应的源不同时，浏览器就会返回一个跨域错误。

二、调用 JavaScript 方法的方式

在 IFrame 中调用 JavaScript 方法，主要有以下两种方式：

1.父窗口主动调用子窗口的 JavaScript 方法：

```javascript

// 父窗口

window.addEventListener("load", function() { var iframe = document.getElementById("myIframe");

iframe.contentWindow.myFunction();

});

```

2.子窗口主动调用父窗口的 JavaScript 方法：

```javascript

// 子窗口

window.addEventListener("load", function() {

var iframe = document.getElementById("myIframe");

iframe.contentWindow.postMessage({msg: "Hello from iframe!"},

layui iframe 子组件中调用父组件的方法

如何在layui的iframe子组件中调用父组件的方法

在前端开发中，我们经常会遇到需要在子组件中调用父组件方法的情况。在layui框架中，使用iframe进行页面嵌套是一种常见的构建方式。本文将介绍如何在layui的iframe子组件中调用父组件的方法，以及可能遇到的问题和解决方法。

1. 父子组件的定义

首先，我们需要明确父组件和子组件的定义。在layui中，父组件和子组件分别是两个html页面，通过iframe进行嵌套。父组件页面包含一个iframe标签，通过src属性指定子组件页面的路径。子组件页面是被嵌套在iframe中的页面，负责展示具体的内容。在子组件中，我们需要调用父组件的方法。

2. 在子组件中获取父组件的window对象

要在子组件中调用父组件的方法，首先需要获取父组件的window对象。在子组件页面中，可以通过`window.parent`来获取父组件的window对象。例如，可以使用以下代码获取父组件的window对象：

javascript

var parentWindow = window.parent;

获取到父组件的window对象后，可以使用其提供的方法或属性。

3. 在子组件中调用父组件的方法

在子组件中获取到父组件的window对象后，就可以调用父组件中定义的方法了。要调用方法，需要使用`parentWindow.方法名()`的方式。例如，如果父组件中有一个名为`doSomething()`的方法，可以通过以下代码在子组件中调用该方法：

javascript

parentWindow.doSomething();

4. 向父组件传递参数

在实际应用中，我们可能需要向父组件传递参数。可以通过在调用方法时传递参数的方式实现。在子组件中，可以使用以下代码向父组件的方法传递参数：

javascript

parentWindow.doSomething(param1, param2);

iframe框架使用方法

如果您需要在网页中嵌入其他网页或网站的内容，可以使用HTML中的iframe框架。iframe框架是HTML中的标签，可以在网页中嵌入其他网页或网站的内容。

```html

```

其中，src属性指定要嵌入的网页或网站的网址。

下面是一个示例：

在上面的例子中，使用了一个iframe框架，嵌入了百度的网页内容。打开网页后，可以看到百度的主页被嵌入到了页面中。

除了 src 属性，还有其他的属性可用于设置iframe框架：

- width：设置iframe框架的宽度。

- height：设置iframe框架的高度。

- frameborder：设置是否显示框架的边框。可取值0、1，默认值为1。

- scrolling：设置是否允许滚动。可取值yes、no、auto，默认值为auto。

- sandbox：设置用于非信任网站的安全沙盒模式。

在上面的例子中，设置了iframe框架的宽度为800像素，高度为600像素，不显示边框，禁止滚动。

需要注意的是，使用iframe框架嵌入其他网页或网站的内容时，可能存在跨域访问的问题。这是因为浏览器默认是不允许从一个域名的页面中嵌入另外一个域名的页面内容。如果遇到了这个问题，可以在被嵌入的页面中添加一个特殊的HTTP头部，让浏览器允许跨域访问。