[前端] iframe及postMessage使用解析

这篇主要讲iframe标签,对于frameset、frame、noframe标签就不讲了,因为在h5中已经不支持了。

 

一、iframe标签介绍:

<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

 

二、iframe标签兼容:

 

<iframe src="page_two.html" name="iframe" frameborder="0" scrolling="no">您的浏览器不支持iframe</iframe>

 

 

 

三、jquery操作iframe:

 

  1. $('#id', window.parent.document)  iframe获取父页面标签
  2. $(window.frames.iframe.document)  父页面获取iframe标签
注意:所有的实现效果都要基于服务器环境才能看到,可以去下载个wamp 本地服务器集成开发环境(php)
 
在操作时,首先给定两个页面,page_one.html  page_two.html
 
page_one.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面一</title>
    <script src="../jquery.min.js"></script>
</head>
<body>
    <h2 id="h2">页面一</h2>
    <a href="page_two.html" target="iframe">页面二</a>
    <button type="button">改变页面二按钮颜色</button>
    <hr>
    <iframe src="page_two.html" name="iframe" frameborder="0" scrolling="no">您的浏览器不支持iframe</iframe>
</body>
</html>

 

page_two.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面二</title>
    <script src="../jquery.min.js"></script>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 400px;
        height: 200px;
        background: #4E98DD
    }
    </style>
</head>
<body>
    <div class="box">
        hello world !
        <button id="btn" type="button">改变页面一h2颜色</button>
    </div>
</body>
</html>

 

1、iframe操作父页面内容

通过点击按钮改变父页面h2标签的文字颜色
<script>
$('button').click(function() {
    // 定义rgb颜色
    var randomColorR = parseInt(Math.random() * 255);
    var randomColorG = parseInt(Math.random() * 255);
    var randomColorB = parseInt(Math.random() * 255);

    $('#h2', window.parent.document).css('color', "rgb("+randomColorR+","+randomColorG+","+randomColorB+")"); 
});
</script>

 

1、可以把#h2 选择器改成 h2  总之选择器可以使用id class tag
2、window可以改成self 或 top
 
效果:
 

2、父页面操作iframe内容

点击按扭改变iframe内按钮的背景颜色
<script>
$('button').click(function() {
    // 定义rgb颜色
    var randomColorR = parseInt(Math.random() * 255);
    var randomColorG = parseInt(Math.random() * 255);
    var randomColorB = parseInt(Math.random() * 255);

    $(window.frames['iframe'].document).find("#btn").css('backgroundColor', "rgb("+randomColorR+","+randomColorG+","+randomColorB+")");
});
</script>

 

1、这里也可以把window改成 self 或  top
2、其他的操作方式(有些是需要只有一个iframe的情况,才能使用)
  1.  
    $(window.frames.iframe.document)

     

  2. $(iframe.document)

     

  3. $(frames[0].document)

     

  4.  
    $('iframe').contents()

     

 
效果:

 

 

如果还有深层次的iframe如在page_two.html再嵌套个iframe

要实现改变页面三的按钮背景颜色只需要这样写就行了

 

<script>
$('button').click(function() {
    // 定义rgb颜色
    var randomColorR = parseInt(Math.random() * 255);
    var randomColorG = parseInt(Math.random() * 255);
    var randomColorB = parseInt(Math.random() * 255);

    $(window.frames['iframe'].frames['iframe-three'].document).find("button").css('backgroundColor', "rgb("+randomColorR+","+randomColorG+","+randomColorB+")");
});
</script>

 

 

 

写法: window.frames['iframe1'].frames['iframe2'].frames['iframe3']]……

反之写法:window.parent.parent

 

四、window、self、top、parent解析

1)、window.self
功能:是对当前窗口自身的引用。它和window属性是等价的。
语法:window.self
注:window、self、window.self是等价的。

2)、window.top
功能:返回顶层窗口,即浏览器窗口。
语法:window.top
注:如果窗口本身就是顶层窗口,top属性返回的是对自身的引用。

3)、window.parent
功能:返回父窗口。
语法:window.parent
注:如果窗口本身是顶层窗口,parent属性返回的是对自身的引用。

在框架网页中,一般父窗口就是顶层窗口,但如果框架中还有框架,父窗口和顶层窗口就不一定相同了。

 

五、点击链接在iframe里打开,只需要把a的target指定到iframe的name就行了

 

<a href="page_two.html" target="iframe">页面二</a>
<iframe src="page_two.html" height="600px" name="iframe" frameborder="0" scrolling="no">您的浏览器不支持iframe</iframe>

 

 

六、框架js方法调用

1、父页面(page_one.html)调用iframe方法

 

<script>
function pageOne() {
    console.log('这是页面一的方法!');
}
$('button').click(function() {
    window.frames.iframe.pageTwo();  
});
</script>

 

输出:这是页面二的方法

 

2、iframe(page_two.html)调用父页面方法

 

<script>
function pageTwo() {
    console.log('这是页面二的方法!');
}
$('button').click(function() {
    window.parent.pageOne();
});
</script>

输出:这是页面一的方法

 

同理属性也是可以获取的

父页面定义 

 

var user = {name: '王二', age: 42};

 

iframe获取

 

console.log(window.parent.user);

 

 

 

七、postMessage使用

postMessage('数据', 'url地址');  如果url地址为* 表示所有的页面都可以接收信息

1、父页面发送与接收

 

// 向iframe发送数据
$('button').click(function() {
    window.frames.iframe.postMessage('{name: "张三", age: 24}', 'http://localhost/test/iframe/page_two.html');
});

// 接收iframe发送的数据
window.addEventListener("message", function( e ) {
    console.log(e.data);
}, false );

 

 

 

2、iframe发送与接收

 

// 向父页面发送数据
$('button').click(function() {
    window.parent.postMessage('{name: "李四", age: 36}', 'http://localhost/test/iframe/page_one.html');
});

// 接收父页面发送的数据
window.addEventListener("message", function( e ) {
    console.log(e.data);
}, false );

 

欢迎关注技术开发分享录:http://fenxianglu.cn/

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在Vue3中使用iframepostMessage功能,可以通过以下步骤实现: 1. 首先,在Vue组件中获取到iframe的DOM元素。可以使用`document.querySelector`或者Vue的`ref`属性来获取。例如,使用`ref`属性获取到iframe元素的示例代码如下: ```javascript <template> <iframe ref="myIframe" src="http://example.com"></iframe> </template> <script> export default { mounted() { const iframe = this.$refs.myIframe; // 在这里可以对iframe进行操作 } } </script> ``` 2. 接下来,监听iframe的`onload`事件,确保iframe已经加载完成。在事件处理程序中,可以使用`contentWindow.postMessage`方法向iframe发送消息。示例代码如下: ```javascript mounted() { const iframe = this.$refs.myIframe; iframe.onload = () => { console.log('iframe已加载'); iframe.contentWindow.postMessage('hello world', '*'); } } ``` 3. 在子页面中,可以使用`window.addEventListener`方法监听消息事件。通过判断消息的来源和数据类型,可以对接收到的消息进行处理。示例代码如下: ```javascript mounted() { window.addEventListener('message', (e) => { if (e.origin === 'http://example.com' && typeof e.data === 'string') { console.log('接收到来自iframe的数据', e.data); // 根据情况进行处理 } }, false); } ``` 这样,你就可以在Vue3中使用iframepostMessage功能了。通过监听事件和发送消息,可以实现Vue组件与iframe之间的通信。注意,在实际使用时,需要根据实际情况设置正确的来源和目标URL。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3 中iframe postmessage使用](https://blog.csdn.net/qq_46019581/article/details/127464930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue中iframepostMessage message的使用,以及一些小疑问](https://blog.csdn.net/snows_l/article/details/131532067)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天空还下着雪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值