iframe 父页面js - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

vue父页面给iframe子页面传值

在vue父页面有两个个参数名称和图标，需要把这两个参数传到iframe的地图里面，在地图触发绘点事件的时候，获取到传来的参数并且展示 vue:传值给子页面iframe // 传值给子页面iframe...接收父页面的值在iframe中，使用window.addEventListener监听message事件，然后在事件处理程序中获取传递的数据： iframe.html --> // 监听来自vue父页面的消息 window.addEventListener('message', function(event) { const...，会将值传递给子页面的iframe元素。...子页面通过监听message事件获取传递的值，并进行相应的处理。这种方法需要父页面和子页面在同一个域名下，否则会因为浏览器的同源策略而导致通信失败。

3.2K2 0

Vue中iframe调用父页面的方法

父页面结构 PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL 父页面" :visible.sync...="JscancelOrderVisible" width="30%" > iframe width="100%" height="750px" frameborder="0" :src="jscancelOrderSrc...">iframe> 1，子页面获取父页面的vue对象。...__vue__ 2，比如父页面vue里有方法 PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL methods:...__vue__.test()调用父页面的test方法。延申普通页面嵌套iframe怎么调用父页面的方法

4.3K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

iframe 父页面与子页面之间的方法的相互调用

language="javascript" type="text/javascript"> function parenttest() { alert("这是父页面的方法... 页面的方法" onclick="btnClick()"/> iframe style="width:300px; height:300px;" id="childframe" src="ChildPage.html...">iframe> 父页面的方法" onclick="btnClick()"/>

4K1 0

js判断本页面被 iframe 嵌套

viewport" content="width=device-width, initial-scale=1.0"> Document 我来自 iframe... // 判断本页面来自 iframe // 可行 if (window.frames.length !...= parent.frames.length) { console.log('在iframe中111'); } // 不可行 if (self.frameElement...&& self.frameElement.tagName == "IFRAME") { console.log('在iframe中222'); } // 可行 if...= top) { console.log('在iframe中333'); } // 禁止页面被别人iframe // if (top.location !

5.5K1 0

【JS】JSJQ iframe与父级之间相互通讯

JS在iframe中获取父窗口的元素 window.parent.document.getElementById("id").innerText = "string"; jquery在父窗口中获取iframe...contents().find("#id").click(); //调用子frame中的方法； $("#iframeMain")[0].contentWindow.FunctionName(); jquery在iframe...中获取父窗口的元素 window.parent.document.querySelector("#id").innerText = "String"

4.4K2 0

jquery在iframe中选中父元素节点

——《新五代史·伶官传序》我们在使用如layui的layer弹窗或者在页面上用别的方式打开的iframe中可能会要获取到父页面的某个元素可以使用： window.parent.$(".layui-laypage-btn...") 这里.layui-laypage-btn是父元素的节点主要是 window.parent这个属性，能返回当前窗口的父窗口

2.8K1 0

快速实现 iframe 嵌套页面

比如现在有一个需求，就是需要在当前项目的一个页面中嵌套其他系统通过接口API返回的一个页面，首先考虑的就是 iframe 嵌套页面，于是就在当前页面尝试了一下，效果还是不错的。...页面操作首先需要在父页面引入一个 iframe 标签，用于放置接口传过来的页面iframe id="tab1" width="100%" height="300">iframe>其中，参数 width...页面 js 代码如下//基础信息 tabfunction tab1() { console.log("tab1 click"); var url = prefix+"/toIframe?...";}待嵌套的子页面代码 iframe.html 代码如下页面可以看到已经显示当然，如果你想在 js 方法中动态控制 iframe 的宽高，可以如下更改按钮点击事件绑定的方法 tab1()//基础信息 tabfunction tab1() { console.log

1.1K1 0

原生iframe 父子页面通讯

html iframe id="kiwiIframe" v-if="showPickForm" src="${chrome.runtime.getURL("iframes/notSupport.html...")}"> 1.父页面向子页面传递值 let kiwiIframe = document.querySelector("#kiwiIframe"); kiwiIframe.contentWindow.postMessage...("support_ok", "*"); 2.子页面接受值 window.addEventListener("message", function () { // console.log...break; } }); 3.子页面再向父页面传递值 window.parent.postMessage("support", "*"); 4.父页面再次接受值

1.1K2 0

iframe怎么将参数传递给vue 父组件

在子页面的iframe中想将参数传递给Vue父组件，可以使用postMessage()方法将数据发送给父窗口。父组件可以通过监听message事件来接收并处理这些数据。...将参数从子页面的iframe传递给Vue父组件：在子页面的iframe中： // 发送消息给父窗口 const data = { imgUrl: '......// ... } } 在Vue父组件中，通过在mounted()钩子中监听message事件，可以获取子页面iframe发送的消息。...-- iframe.html --> // 监听来自父页面的消息 window.addEventListener('message', function(event) { const...= event.data; // 在这里处理接收到的消息 console.log('Received message from parent:', data); }); 父页面使用

4K2 0

防止别人 iframe 自己的页面

一、如果对方是静态调用 iframe，用 js 阻止即可， if ( top !...== self ) top.location.replace( self.location.href ); 二、如果对方是动态调用的（类似于下方代码），又禁用了自己页面的 js 的话...， document.write('iframe seamless sandbox security="...frame，即使是同域名的页面中嵌套也不允许。...SAMEORIGIN：表示该页面可以在同域名页面的 frame 中展示。 ALLOW-FROM url：表示该页面可以在指定来源的 frame 中展示。三、踩坑！

1.9K2 0

解决浏览器差异导致从子页面回到父页面，父页面不刷新的问题

我的问题也是如此，我的需求是从父页面跳转子页面，子页面提交后返回父页面，并且父页面刷新。 ...Android的Chrome浏览器对这个需求就很容易支持，因为他每次页面重新显示的时候，都会刷新整个页面。而IOS的Safari浏览器出现了问题，Safari浏览器会读取缓存，不会重新刷新页面。...总体思路是在子页面返回时，告知父页面刷新。并且只在IOS上执行这个操作，否则Android会刷新两遍。 ...由于笔者对JS并不算精通，最初是想参考Android原生的回调操作，利用js实现页面回调，最后没能实现。然后考虑利用浏览器的生命周期，在H5中应该叫做事件，来处理。 ...它是在页面显示的时候响应，同时支持Chrome和Safari。

3.7K2 0

JS 对指定iframe 全屏操作

最近在搞页面全屏踩到一个坑。。...首先要知道如果直接在iframe 页面调用requestFullScreen()是没有效果的，需要在当前iframe 的parent 页面调用，其实iframe的 DIV 也是这个原因。...具体代码实现如下 function fullScreen(iframeId) { /* 获取父类的document */ var parentDoc = parent.document;.../* 定义一个接收元素的变量 */ var thisIframe = null; $("iframe", parentDoc).each(function (index, e)

11.1K5 0

实现iframe父窗体与子窗体的通信

0.背景介绍 (1)需要在当前的前端项目中，使用iframe嵌套别的站点页面。 (2)当子窗体触发了一个事件后，要给父窗体传一个跳转地址的url。...父窗体监听到这个事件后，根据接收到的url，来更新当前父窗体的url，实现页面的跳转。...不过要前提是要确保对不同域的页面有修改权限，并且父窗体、子窗体页面都要同时加载这个MessengerJS。.../messenger.js"> 这是父窗体 iframe id...iframe，要先引入messenger.js，同时初始化messenger到一个统一的项目中，其中第一个参数为自己页面messenger对象的名字，第二个参数为项目名称；然后父窗体要绑定监听消息事件，

11.1K77 1

jqGrid 关闭刷新父页面数据

子页面提交方法: function commit(){ var data = $("#pwd").serialize(); $.post("#",data,function(data)...{ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); }) } 父窗口数据刷新再关闭

5K10 0

iframe页面点击页面其它地方隐藏某元素

(id) { return document.getElementById(id); }; // 初始化加载 window.onload = function () { // 当前页面...function (e) { $("show-or-hide").style.display = "none"; showFlag = true; } // iframe...页面 content为iframe元素的id $("content").contentWindow.document.onclick = function (e) { $("show-or-hide

2.5K0 0

jquery刷新当前页面、刷新父级页面

jquery刷新当前页面、刷新父级页面 window.location.reload(); // 刷新当前页面 parent.location.reload(); // 刷新父级页面 opener.location.reload...(); // 刷新父窗口页面（用于单开窗口） top.location.reload(); // 刷新最顶端页面（用于多开窗口）补充常用的知识 window.open(); // 打开窗口 window.close...url可打印当前url console.log(window.location.href) // 打印当前url window.open("http://xx.com", "_blank"); // 从新页面打开

3.5K1 0

iframe实现页面局部刷新原理解析

web开发实现页面的局部刷新的技术，除了比较常见的ajax，还有通过iframe来实现，这种方式和ajax有什么不同呢首先看一个用ajax技术实现的页面局部刷新的效果——表单登陆。...那同样的表单登陆，用iframe如何实现呢？先看前端页面的代码： js是不准确的。...这段代码用javascript标签包裹，所以是一段html代码，而js代码中有一个parent.document。...原理是将表单提交后跳转的页面，指向本页的iframe标签中，iframe刷新后，返回的是后端输出的javascript标签包裹的js代码，而返回的javascript代码可以直接运行，并且可以操作父页面中的元素

6.1K3 0

iframe 同域下父子页面的通信

//共同引用的JS文件 common.js ; (function (window, $) { $(function ($) { window.trip = window.trip...|| {}; window.trip.name== window.trip.name || {}; })(window, $); //父页面 $(function(){...缓存一个控件 }); //html代码 //子页面...iframe弹出的页面 //直接赋值 parent.trip.name.val(“ceshi”)

1.1K10 0

【JS应用】Iframe 解决跨域

）其中一个页面是父页面，也就是真正的内容页，展示数据的另外两个作为子页面，是辅助父页面请求跨域数据用的，不会显示在页面中 2、利用全局变量 window.name 存储数据父子页面利用 window.name...页面此时 a.com 页面就能通过 window.name 拿到 b.com 保存过的数据啦 5、给父页面传递数据上面那个 a.com 页面是辅助页，拿到数据之后，需要传递给真正需要数据的父页面（...加载 b.com 下的辅助页面 B 2、辅助页面B 开始请求接口 b.com/xxx，请求成功，存放到 window.name 3、隐藏 iframe 由页面B 跳转到 a.com 下另一个辅助页（页面...C） 4、页面C 读取到 B存放的 window.name，然后传递给父页面A 5、父页面A 拿到数据，用于展示在页面上简单模拟现在我启动了两个服务 1、localhost:3001 下有 a.html...比如请求的接口需要某些参数，这些参数是父页面提供的，所以就只能把这些参数放到 iframe 的 url 上以便通信拼接 url 函数 function parseUrl (url, param) {

20.3K1 1

Layui-admin-iframe通过页面链接直接在iframe内打开一个新的页面，实现单页面的效果

前言：　　使用Layui-admin做后台管理框架有很长的一段时间了，但是一直没有对框架内iframe菜单栏切换跳转做深入的了解。...今天有一个这样的需求就是通过获取超链接中传递过来的跳转地址和对应的tabs的title名称参数，在layui-admin-iframe中自动打开一个新的tabs页面，不需要点击左边的菜单栏，实现一个单页面的效果...，获取超链接中传递过来的跳转页面地址和tabs title名称在iframe中打开: //layui预先加载 layui.use('index', function(){ var transferUrl...(transferUrl,openTabsName); }) Js获取超链接里面传递的参数值: 如获取超链接[https://xxxx.xxx.com?...variable) { var query = window.location.search.substring(1); console.log(decodeURIComponent(query));//js

7.2K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭