精华内容
下载资源
问答
  • iframe页面
    千次阅读
    2021-12-19 22:30:01

    操作 iframe 必须掌握的父子页面关系及常用的操作方法,理解其中的联系。

    <iframe id="myframe" src='<c:url value="/base/server/report/report.do?REPORT_ID=${param.REPORT_ID}"/>' height="100%" width="100%"></iframe>

    通过父页面操作子页面

    获取 iframe 页面中的元素

    操作javascriptjquery
    方式一document.getElementById(‘myframe’).contentWindow.document.getElementById(‘V_ORGID’).value = 111$(‘#myframe’).contents().find(‘#V_ORGID’).val(‘111’)
    方式二document.frames[‘myframe’].document.getElementById(‘V_ORGID’).value = 111$(‘#V_ORGID’, document.frames(‘myframe’).document).val(‘111’)

    调用 iframe 页面中的方法

    操作javascriptjquery
    方式一document.getElementById(“myframe”).contentWindow.fn()
    方式二document.frames[“myframe”].fn()

    通过子页面操作父页面

    获取 iframe 页面中的元素

    操作javascriptjquery
    方式一window.parent.document.getElementById(“ORGID”).value = 111$(“#ORGID”,parent.document).val(‘111’)

    调用 iframe 页面中的方法

    操作javascriptjquery
    方式一window.parent.fn()

    通过子页面操作父页面中的其他 iframe 页面

    前提:iframe 必须设置了 id。

    获取 iframe 页面中的元素

    window.frames['id'].document.getElementById()

    调用 iframe 页面中的方法

    window.frames['id'].fn()

    判断 iframe 是否加载完毕

    javascript 实现

    window.onload = function() {
        let iframe = document.getElementById('myframe')
        if (iframe.attachEvent) {
            // IE
            iframe.attachEvent('onload', function() {
                console.log('iframe加载完毕!')
            })
        } else { // 非IE
            iframe.onload = function() {
                console.log('iframe加载完毕!')
            }
        }
    }

    jquery 实现

    $(function() {
        $('#myframe').load(function() {
            console.log('iframe加载完毕!')
        })
    })
    更多相关内容
  • iframe页面获取父页面元素 代码如下: 代码如下: $.(‘#objld’, parent.document); 在父页面获取iframe页面的元素 代码如下: 代码如下: $(“#objid”, document.iframes(‘iframe’).document) 或 代码如下:...
  • 首先在父页面的javascript给定义一个window.name,并赋予一个字符串值,如window.name="test",其中赋予的字符串值可以随意定义,然后在Iframe页面的Form 标签中定义target属性,并且其值也必须与之前定义的window....
  • iframe参数 怎么传递参数到iframe页面

    千次阅读 2021-06-13 00:58:12
    关于使用iframe跳转参数获取问题怎么把URL参数传递到B页面iframe的C页面里?A页面打开一个B页面的链接,怎么把A页面的URL参数传递到B页面iframe的CA.html BB.html window.onload = function(){ var v = document....

    关于使用iframe跳转参数获取问题

    怎么把URL参数传递到B页面的iframe的C页面里?

    A页面打开一个B页面的链接,怎么把A页面的URL参数传递到B页面iframe的CA.html BB.html window.onload = function(){ var v = document.getElementById("miao"); v.src = "C.html?p=" + UrlValue("p"); }; function UrlValue(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.l

    c074eaa5a30f838f9fb5a991808cb5b1.png

    jquery iframe打开子页面的时候如何传参数的?

    例如A.html是父页面、然后上面是一个列按钮、点击了任何一个按钮就弹出B子页面可以直接取父页面的变量跟方法;如父页面 var a=1;子页面window.parent.a;

    怎么传递参数到iframe页面

    A.html 1 B B.html 1 2 3 4 5 6 7 8 9 10 11 12 window.onload = function(){ var v = document.getElementById("miao"); v.src = "C.html?p=" + UrlValue("p"); }; function UrlValue(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)

    js怎样获取iframe,src中的参数

    iframe中子页面如何接收父页面所接受的参数?

    比如说父页面为a.aspx 其中有一个iframe的src为b.aspx 然后我a.aspx?id=//javascript获取指定参数及其对应的值 function getParameter(paraStr, url) { var result = ""; //获取URL中全部参数列表数据 var str = "&" + url.split("?")[1]; var paraName = paraStr + "="; //判断要获取的参数是否存在 if(str.indexOf(

    iframe怎么获取父页面参数父页面a.php?a=b 子页面c.php b为可变数,子页面怎么获取到b的值在c.php使用$_SERVER['HTTP_REFERER']可以获得父页面的URL地址,地址栏目的参数可以从此值获得。

    Jquery Iframe src 带上post参数

    展开全文
  • vue组件和iframe页面的相互传参

    千次阅读 2022-03-22 17:40:33
    vue组件和iframe页面的相互传参
    目前网上大多关于iframe父子传参的博客都是在叙述父页面是html文件,子iframe文件也是html文件,涉及到父页面是vue组件子iframe页面是html的博客多数讲的不是很明白;而最近我在项目中碰到了这种需求:在vue组件中嵌入iframe页面,并实现父子传参;

    1.vue组件调用iframe页面方法和参数

    (1-1)下面是在 vue组件中(父组件) 一个通过点击按钮触发的方法:

     sentToIframe() {
          let childFrameObj = document.getElementById("unityiframe");
          console.log("childFrameObj", childFrameObj);
          // childFrameObj.contentWindow.getMessageFromParent(this.tData); //第一种向子iFrame传参方式,调用iframe的methods达到传参的目的
          this.$refs.unity.contentWindow.getMessageFromParent(this.tData); // 这样也是可以调用子iframe的方法
          // childFrameObj.contentWindow.frameData = "这是vue组件给你的参数!" // 传参成功
          this.$refs.unity.contentWindow.frameData =
            "这是vue组件给你的第二个参数!"; //传参成功
          console.log("发送完成");
    
          //此外,还可以通过DOM操作,操作子iframe的DOM
          var t = document
            .getElementById("unityiframe")
            .contentWindow.document.getElementById("dd");
          console.log(t);
          //
          console.log("frameData?", unityiframe.window.frameData); //利用id可以调用到iframe里的变量
          // console.log("frameData?",this.$refs.unity.window.frameData) //利用ref调用不到iframe里的变量
        },
    
    

    (1-2)子组件 iframe页面 中有一个被调用的方法及变量:

      var frameData = "别喊我!" //此变量用于测试 vue组件是否能调用此变量
      function getMessageFromParent(value){
        // 接受从vue组件中传过来的参数
        console.log(`我接收到parent传过来的参数了:${value}`)
      }
      
    

    点击按钮的结果是:
    在这里插入图片描述

    2.iframe页面向vue组件传参

    (2-1)在vue组件中有一个供iframe页面调用的方法:

        getFromIframe(value) {
          console.log(`我是iframe传过来的参数:${value}`);
          console.log("我被iframe调用了!");
          console.log(this.vueData);
          console.log(`改变前是:你是否能够改变我;改变后是:${this.isChangeMe}`);
        }
    
    

    (2-2)iframe调用vue组件方法的代码

      function Obj(res){
      // Obj通过按钮点击触发
        console.log(parent)
            // 调用vue组件方法
          parent.getFromIframe("我叫iframe")
          // 向vue组件发送参数 && 改变vue组件的参数
          parent.isChangeMe = "你已经被我iframe改变了"
      }
    
    

    但是 !!!!!!!!!!!!!!!

    只这么做是不够的,会报错,如下:
    在这里插入图片描述

    个人猜想: 问题的原因是 iframe的parent并不是vue实例!

    目前只找到了一个办法来解决这个问题:

    就是在created钩子里加上这两句,

    created() {
        window.getFromIframe = this.getFromIframe; //把vue实例中的方法引用给window对象
      },
    

    在调用的vue实例的方法中 加上对vue内变量的改变

    getFromIframe(value) {
          console.log(`我是iframe传过来的参数:${value}`);
          console.log("我被iframe调用了!");
          console.log(this.vueData);
          this.isChangeMe = window.isChangeMe;// 把window变量 赋值给 vue 实例变量;使得在iframe中能够改变vue实例中变量
          console.log(`改变前是:你是否能够改变我;改变后是:${this.isChangeMe}`);
        }
    
    
    

    最终的运行结果是:
    在这里插入图片描述

    bingo!!!!! 问题暂时得到了解决。

    总结
    vue组件 和 iframe 的嵌入麻烦多多,且目前还没还没找到正统的方法;此外,还有很多坑我还没踩到,如果后续这方面有什么问题 以及 其他的解决方案,我 会继续更新到这上面来的!

    展开全文
  • 在vue中嵌入iframe页面

    千次阅读 2021-08-21 14:35:45
    一、嵌入iframe页面业务场景 项目是一个物流运营平台的管理系统,系统中对接了第三方的客服系统。因此这里需要在自己的页面中嵌入三方客服聊天的页面(这里对接了智齿)。ps:别问我为什么不自己写一个聊天的功能,...

    亲测可用,若有疑问请私信

    一、嵌入iframe页面业务场景

    项目是一个物流运营平台的管理系统,系统中对接了第三方的客服系统。因此这里需要在自己的页面中嵌入三方客服聊天的页面(这里对接了智齿)。ps:别问我为什么不自己写一个聊天的功能,问就是不知道。

    二、iframe是什么

    ifram标签规定了一个内联框架,让我们有可能在当前的HTML文档中嵌入另外一个文档,目前所有的主流浏览器都支持iframe标签,当然为了以防万一你可以在iframe标签中写入提示文本,以提示用户当前使用的浏览器不支持iframe。

    <iframe src="http://www.baidu.com">
        IE:你们都看我干吗,我现在也是支持的
    </iframe>
    

    说白了就是我们在一个页面中嵌入另外一个页面,一般这个页面是独立的。

    三、iframe的应用场景包括

    1.沙箱隔离(两个页面js/css互不影响)

    2.引入三方内容(如三方(QQ)登录,本人引入了三方客服)

    3.网页编辑器,所见即所得(element在线编辑器)

    4.在页面中打开excel、pdf等文件

    知乎的编辑器使用了 contentEditable,但是video使用了iframe标签
    个人不建议在页面中嵌入iframe,除非业务真的需要这样做,两个页面之间的通信是iframe最先要解决的问题。后续需要解决的问题则更多。

    四、如何控制和使用iframe

    iframe 提供了一些属性供我们控制它:

    width:iframe的宽

    height:iframe的高

    iframe页面的长宽高,页面样式,我们可以根据属性进行控制,同样我们也可以
    使用 css 为iframe页面添加 class id 来控制iframe

    src:我们嵌入页面的URL

    name:iframe的name属性

    scrolling:(auto,yes,no,默认auto)页面中的iframe是否显示滚动条。

    这个属性可以让我们更好的控制 iframe 的滚动条,但是页面高度大于iframe高度时滚动条是一定会出现的,这时我们设置了 no 或者 yes 页面超出部分将不再显示,所以请根据自己的业务情况进行选择。

    更多属性请移步:菜鸟教程

    五、代码示例

    
        <iframe
            id="iframeContain"
            name="iframeContain"
            seamless
            scrolling="yes"
            :src="iframeURL"
          >
            您当前的浏览器不支持页面上的功能,请升级您当前的浏览器版本或使用谷歌浏览器访问当前页面
         </iframe>
    
    <style lang='scss' scoped> /** iframe样式 */ #iframeContain{ width: 100%; height: 800px; } </style> 

    六、两个页面之间的通信

    页面的通信大前提是页面在同一域名下,不同域名下的通信极其困难,甚至window.close()都无法执行。(详情见浏览器同源策略)
    页面通信主要有三种 父子、子父、兄弟

    1.父子

    通过name属性 name = “iframeContain”

    父页面

        fun parent(){
        var chilsData = iframeContain.window.child()
        //  chilsData = [a,b,c]
        }
    

    子页面

        var data = [a,b,c]
        fun child(){
        return data
        }
    展开全文
  • 如何使iframe中的链接都在新窗口打开a.html文件源码如下 如何让所有链接在新窗口打开2008-07-24 21:26使用target="blank"属性 open 注意:XHTML 1.1 规范已经不支持“target='_blank'页面上所有的链接都在新窗口打开...
  • js如何获取iframe页面内的对象

    千次阅读 2020-12-30 20:51:51
    简单介绍iframe标签,所有的浏览器都支持标签,iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。通常我们常用的iframe标签的属性有...那么如何使用js来获取iframe页面内的对象呢,以及反过来说内嵌的ifra...
  • 我试图滚动iOS上的iframe,我成功了,它的滚动的好,参考:滚动的iframe解决,但在iframe页面显示不全但是,所有的解决方案都有一个问题:iframe页面没有完全显示...我测试了我的iphone和ipad,iframe页面显示波涛...
  • web自动化之iframe页面切换

    千次阅读 2022-03-10 10:52:24
    原理:页面会进行一层一层的嵌套,只有切换到嵌套的iframe页面,才可以定位到iframe页面里的标签属性等,一般情况不会超过三层,通常最多一层,可能的话有平行的iframe。 # 1、通过name属性进行定位,前提是iframe...
  • Vue集成Iframe页面

    千次阅读 2020-12-19 05:28:07
    功能导航{{item.resourceName}}v-for="(item,index) in funMenu.nextMenu"@mouseover="clickByMenu($event,item,'nextMenu')"@click="clickMenuJump(funMenu.nextMenu, item)">{{item.resourceName}}{{item....
  • iframe嵌套iframe 页面高度自适应

    千次阅读 2020-06-28 15:39:36
    做项目的时候遇到了iframe嵌套iframe 需要页面高度跟随页面内容多少来显示。而且还不能使用iframe自带的scrolling滚动条。 刚开始就算父iframe高度 计算错误,导致页面显示只显示一半的内容。 解决方法是 : 在...
  • iframe页面相互调用方法

    万次阅读 2018-07-25 13:35:08
    最近的项目中嵌入了外部的iframe,想跨域调用自己页面的方法,点击iframe中的返回按钮,返回到父级的上一级页面,因为是自己的项目是单页应用,所以无法直接使用window.location.href,这个需求让我头疼了两天(包括...
  • 动态创建iframe页面内容

    千次阅读 2020-04-13 18:30:00
    <!DOCTYPE html> <... <head> ...动态创建iframe页面内容</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="content-type" co...
  • vue中内嵌iframe页面并进行传值

    千次阅读 2022-02-16 15:27:34
    需求是把两个单独的系统在一个总的系统作为菜单进行免密登录,由于时间还有跨域和不同的token等问题,就使用了内嵌iframe,因为是不同的域名进入子系统也要本地存储一下(获取的user信息以及token传入到iframe子系统...
  • <template> <div class="workbench-container"> <div v-if="idDev" style="width:100%;height:100px"> ...div style="margin-left:-162px;...iframe id="iFrame" ref="iframes" .
  • vue 中嵌入iframe页面

    万次阅读 2020-04-24 18:36:45
    使用的是vue-element-admin。 需求 项目需求是在点击左边侧边栏的时候判断如果是...新建了iframe.vue文件,里面套iframe标签,通过地址的参数不同,跳转不同的iframe页面,但是在做切换时,会导致iframe页面重载,利...
  • vue项目如何内嵌如iframe页面

    千次阅读 2020-12-19 13:52:49
    页面 接收传来的页面即子页面在vue页面中created(){window.addEventListener("message",this.receiveMessageFromIframePage,false);},receiveMessageFromIframePage(event){if(event.data&&event.data....
  • js如何调用iframe页面里的方法

    千次阅读 2020-08-29 11:59:29
    在写页面时常常需要弹出iframe页面,而iframe页面的内容是另一个页面,比如,弹出iframe的里面是一个表单(另一个页面),这样在父页面怎样调用子页面的方法呢? 经过一番摸索,发现采用如下js即可成功调用 //用...
  • layui如何刷新iframe页面

    千次阅读 2020-04-01 21:39:43
    刚开始用layui框架对他的ifame菜单很感兴趣,但会发现一个页面改变了数据库状态的话,切换到另一个页面如果不刷新显示的还是原先数据的问题,对在前台进行权限管理的用户(比如我保存状态才有编辑按钮,然而在带审核...
  • 1 在iframe中查找父页面元素的方法: $('#id', window.parent.document) 2 在iframe中调用父页面中定义的方法和变量: parent.method parent.value
  • iframe页面无法跳转问题

    千次阅读 2019-08-30 18:07:53
    先介绍下我们的项目结构类似与博客园这种页面,左侧很多tab栏,右边是一块内容区域,之后不管做什么样的操作都在这一块区域中,大概有一百多个页面,我是第一次见到这样结构,用的iframe页面来进行嵌套的。...
  • 刷新iframe页面

    千次阅读 2019-04-10 13:53:23
    一定要注意要刷新的iframe页面与当前页面(编写代码)的关系,同级,父级 如下图,在【database_box】中刷新【header】,代码为: window.parent.parent.document.getElementById(‘header’).contentWindow.location....
  • 从父级页面获取子级iframe页面的方法和数据: document.getElementById("父级元素id").contentWindow.子级方法(); document.getElementById("父级元素id").contentWindow.vue实例; document.getElementById("父级...
  • vue组件和iframe页面的相互传参问题

    千次阅读 2020-01-10 16:41:09
    vue组件和iframe页面的相互传参问题 目前网上大多关于iframe父子传参的博客都是在叙述父页面是html文件,子iframe文件也是html文件,涉及到父页面是vue组件子iframe页面是 ...
  • 主要获取iframe里面的文档对象,就可以任意操作iframe的内容 //contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档。可以通过所有标准的 DOM 方法来处理被返回的对象。 //querySelector 选择器 当然也可用...
  • 修改iframe页面中的css

    千次阅读 2020-09-03 17:15:34
    在一个html页面中(a.html)使用iframe引入另外一个页面(b.html),有时候我们需要修改ifram页面的样式,该如何操作呢?假设我们没有修改b.html页面的权限(否则直接修改b.html的代码不就简单了么)。 分为两种情况...
  • 判断iframe页面的url是否有效

    千次阅读 2019-05-09 16:00:24
    在父页面请求连接,根据返回结果判断链接是否有效 $.ajax({ url: "demo.html", success: function(data) { console.log(data); }, error: function(data){ //失败的操作 console.log(data.status);//404表....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 146,219
精华内容 58,487
关键字:

iframe页面