精华内容
下载资源
问答
  • iframe跨域问题
    千次阅读
    2021-11-19 11:23:06

    (摘抄大佬vicky_lxw用户的解释)
    1、首先保证嵌入的页面和vue同一项目中,不存在跨域问题。
    2、如果是iframe不传递参数的话,是可以src嵌入不同的网页的,例如你嵌入一个baidu,只要没有数据交互也是可以的
    3、如果有少量数据交互,看能否通过url传递参数来实现
    4、总之尽量绕过去,如果绕不过去,只能具体问题具体分析了。
    5、跨域也是有很多解决方案的,但是仅仅是嵌入一个iframe是没有跨域问题的,js是支持iframe互相传递参数的 6、如果是系统前后分离,才考虑跨域,用反向代理服务器就搞定了

    更多相关内容
  • 何为跨域跨域session/cookie? 也就是第三方session/cookie。第一方session/cookie指的是访客当前访问的网站给访客的浏览器设置的seesion /cookie, 会被存储在访客的计算机上。第三方session/cookie指的是当前访问的...
  • 主要介绍了AngularJS iframe跨域打开内容时报错误的解决办法,需要的朋友可以参考下
  • iframe跨域访问也被研究的很透了。 一般分两种情况: 一、 是同主域下面,不同子域之间的跨域; 同主域,不同子域跨域,设置相同的document.domian就可以解决; 父页访问子页,可以document.getElementById(“myframe...
  • 第一时间想到的就是用iframe了,但问题来了,我和第三方web项目是有交互的,这就违反同源策略了,处理跨域问题是最让人头疼的事之一。 需求是这样的,在我的页面点击一些按钮,要实时反馈到iframe子页面,子页面再...
  • 为解决这个问题,我们把这个组件写成了单独的页面挂到一个域名下,其他项目采用iframe或者webview的方式去加载这个页面,从而实现功能的简单复用。 不过这过程中也产生了很多问题,单是跨域就会出现好几次了。以下...
  • 这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
  • iframe 跨域解决方法

    2019-04-10 01:04:03
    NULL 博文链接:https://hqlly.iteye.com/blog/1662337
  • NULL 博文链接:https://thoreau.iteye.com/blog/745100
  • 该文档介绍了vue和普通web页面中iframe实现跨域的解决方案,解决了主页面中无法调用iframe方法的问题
  • 框架完美解决了iframe之间的跨域通讯。底层技术采用window.name转换代理实现
  • 今天搞的一个登录页面,被别的网站用iframe嵌进去后,死活无法登录(只在IE中存在这种情况)。 很明显,session无法被保存。但是直接在地址栏打开那个登录页面,一切都正常啊。真是奇怪啊。 在网上搜索了一下。发现...
  • 实现内嵌的iframe跨域调用父页面js方法
  • iframe 跨域

    2016-01-14 14:48:37
    iframe跨域,里面包含四个文件,具体使用方式参考代码,
  • 以前在面试的时候经常遇到问关于跨域的事儿,所以自己对跨域有一定的概念性了解,知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使iframe跨域进行POST提交的...
  • iframe 跨域访问session

    2015-01-28 00:08:19
    iframe 跨域访问session问题解决方法
  • NULL 博文链接:https://lililucky1211.iteye.com/blog/1853504
  • iframe跨域访问示例

    2015-04-28 21:06:25
    iframe跨域访问示例
  • 最近在做项目中,遇到一个问题,就是iframe高度的自适应问题,以下是解决办法
  • 下面小编就为大家带来一篇文件上传,iframe跨域数据提交的实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • iframe跨域解决方案

    2014-01-19 16:01:58
    在web开发中,跨域问题是经常遇到的,但是由于浏览器同源策略的限制,不同域之间属性和操作是无法直接交互的。本次讨论iframe和父页面的消息通信。
  • iframe跨域通信

    2022-01-25 13:41:40
    iframe通信 在跨域情况下,可以使用 postMessage 配合监听 onmessage 调用

    在非跨域的情况下,可以通过
    【父调子】 iframe的dom节点.contentWindow
    【子调父】window.top/window.parent
    来相互通信

    在跨域情况下,可以使用postMessage()配合监听onmessage调用

    // 主动调用的页面
    window.top.postMessage('messageMark','*') // 该页面为iframe页面
    iframeDom.contentWindow.postMessage("messageMark", "*"); // 该页面为父页面
    
    // 被调用的页面
    window.addEventListener('message',function(e) {
        if (e.data == 'messageMark') { // 传参校验
            ......
        }
    })
    

    注:需要iframe加载完成才可以调用,初始化时就要执行的功能可以放在iframe.onLoad中执行

    postMessage()方法

    postMessage(message,targetOrigin,arr[transfer])

    message: onmessage事件中可以接受到的数据
    targetOrigin: 指定哪个url能接收到消息事件(默认’*’)
    transfer: 可选,是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权

    message

    利用此事件来监听来自你的扩展其他部分的消息

    示例(vue项目)

    ...
    created(){
        if (!this.isPhone) return
        let _this = this
        // 要执行的内容函数
        const editPhone = function(e) {
            if (e.data == 'editPhone') { // 传参校验
                _this.getDetail()
            }
        }
        window.addEventListener('message',editPhone)
        _this.$emit('hook:beforeDestroy',function() {
            window.removeEventListener('message',editPhone)
        })
    }
    ...
    

    另一个页面

    ...
    methods: {
        phoneChange(){
            ...
            // 跨域通信
            this.iframeDom.contentWindow.postMessage("editPhone", "*");
        }
    }
    ...
    
    展开全文
  • iframe跨域通信 查看演示 源码下载 众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容。 用法举例: 需求是在http://www.demo.org/top.html中通过iframe...
  • 该dome利用了iframe实现两个页面之间的通讯,重点核心功能,解决了iframe跨域问题,以及浏览器兼容问题,目前支持四大主流浏览器,ie目前测试,支持到ie8。
  • vue内嵌iframe跨域通信

    2022-04-12 17:25:51
    1、Vue组件中如何引入iframe? <template> <div class="act-form"> <iframe :src="src"></iframe> </div> </template> <script> export default { data () { ...

    1、Vue组件中如何引入iframe?

    <template>
      <div class="act-form">
        <iframe :src="src"></iframe>
      </div>
    </template>
    
    <script>
    
    export default {
      data () {
        return {
          src: '你的src'
        }
      }
    }
    </script>

    如上,直接通过添加iframe标签,src属性绑定data中的src,第一步引入就完成了

    2、vue如何获取iframe对象以及iframe内的window对象?

    在vue中,dom操作比不上jquery的$('#id')来的方便,但是也有办法,就是通过ref

    <template>
      <div class="act-form">
        <iframe :src="src" ref="iframe"></iframe>
      </div>
    </template>
    
    <script>
    
    export default {
      data () {
        return {
          src: '你的src'
        }
      },
      mounted () {
        // 这里就拿到了iframe的对象
        console.log(this.$refs.iframe)
      }
    }
    </script>

    然后就是获取iframe的window对象,因为只有拿到这个对象才能向iframe中传东西

    <template>
      <div class="act-form">
        <iframe :src="src" ref="iframe"></iframe>
      </div>
    </template>
    
    <script>
    
    export default {
      data () {
        return {
          src: '你的src'
        }
      },
      mounted () {
        // 这里就拿到了iframe的对象
        console.log(this.$refs.iframe)
        // 这里就拿到了iframe的window对象
        console.log(this.$refs.iframe.contentWindow)
      }
    }
    </script>
    

    3、vue如何向iframe内传送信息?

    通过postMessage,具体关于postMessage是什么,自己去google, 我的理解postMessage是有点类似于UDP协议,就像短信,是异步的,你发信息过去,但是没有返回值的,只能内部处理完成以后再通过postMessage向外部发送一个消息,外部监听message 为了让postMessage像TCP,为了体验像同步的和实现多通信互不干扰,特别制定的message结构如下

    {
      cmd: '命令',
      params: {
        '键1': '值1',
        '键2': '值2'
      }
    }

    通过cmd来区别这条message的目的

    具体代码如下

    <template>
      <div class="act-form">
        <iframe :src="src" ref="iframe"></iframe>
        <div @click="sendMessage">向iframe发送信息</div>
      </div>
    </template>
    
    <script>
    
    export default {
      data () {
        return {
          src: '你的src',
          iframeWin: {}
        }
      },
      methods: {
        sendMessage () {
          // 外部vue向iframe内部传数据
          this.iframeWin.postMessage({
            cmd: 'getFormJson',
            params: {}
          }, '*')
        },
      },
      mounted () {
        // 在外部vue的window上添加postMessage的监听,并且绑定处理函数handleMessage
        window.addEventListener('message', this.handleMessage)
        this.iframeWin = this.$refs.iframe.contentWindow
      },
      handleMessage (event) {
        // 根据上面制定的结构来解析iframe内部发回来的数据
        const data = event.data
        switch (data.cmd) {
          case 'returnFormJson':
            // 业务逻辑
            break
          case 'returnHeight':
            // 业务逻辑
            break
        }
      }
    }
    </script>

    4、iframe内如何向外部vue发送信息?

    现在通过点击“向iframe发送信息”这个按钮,从外部vue中已经向iframe中发送了一条信息

    {
      cmd: 'getFormJson',
      params: {}
    }

    那么iframe内部如何处理这个信息呢?

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>iframe Window</title>
        <style>
            body {
                background-color: #D53C2F;
                color: white;
            }
        </style>
    </head>
    <body>
    
        <h1>Hello there, i'm an iframe</h1>
    
        <script>
            // 向父vue页面发送信息
            window.parent.postMessage({
                cmd: 'returnHeight',
                params: {
                  success: true,
                  data: document.body.scrollHeight + 'px'
                }
            }, '*');
    
            // 接受父页面发来的信息
            window.addEventListener("message", function(event){
              var data = event.data;
              switch (data.cmd) {
                case 'getFormJson':
                    // 处理业务逻辑
                    break;
                }
            });
        </script>
    </body>
    </html>

    展开全文
  • iframe跨域

    千次阅读 2018-07-31 11:38:02
    访问iframe: oIframe.contentWindow 可以直接获得iframe的window属性 访问父级:window.parent就是父级的window 访问顶级:window.top 2、主域相同、子域不同时 通过设置window.domain将两个页面置为一样,然后...

    按情境分
    1、不跨域时
    2、主域相同、子域不同时
    3、主域不同


    1、不跨域时

    访问iframe: oIframe.contentWindow  可以直接获得iframe的window属性
    访问父级:window.parent就是父级的window
    访问顶级:window.top

    2、主域相同、子域不同时

    通过设置window.domain将两个页面置为一样,然后就可以像情况一进行处理了

    设置 document.domain = "domain.com";

    3、主域不同

    3.1 父获取子页面想发送的值

    父页面中:

    var flag = true;
    oIframe.onload = function(){
        if(flag){
            oIframe.src = './xl.html';    //必须设置一个
            flag = false;
        } else {
            console.log(oIframe.contentWindow.name);
        }
    }

    子页面:

    设置window.name = 某值

    window.name 是什么:

    只要浏览器窗口不关闭,无论中间调转了多少次链接,页面变成什么样子,都可以获得窗口下设置的window.name值
    name 在浏览器环境中是一个全局window对象的属性,当在 iframe 中加载新页面时,name 的属性值依旧保持不变。
    name 属性仅对相同域名的 iframe 可访问
    window.name 的优势
    数据量更大(2M)、更安全、可传递多种数据格式
    window.name 的劣势
    只适用于隐藏iframe的情形

    信息交互的逻辑:

    将子页面js中的window.name值设置为想要向父页面传递的信息。当iframe即子页面加载完成后,触发父页面的iframe.onload事件,在父页面总将子页面的src设置为'suibian.html'(即让子页面与自己貌似同源),并且设置一个flag让他不在重新加载,因为这个src值一谢iframe就会重新加载。在这个时候获取子页面的contentWindow的属性就能取到了

    3.2 子页面获取父页面传来的值

    通过改写子页面src的哈希值来向子页面传递值

    location.hash原理:
    1、动态改变location.hash,iframe不会重载
    2、无论跨域与否,iframe内可以获取自己的location.hash

    父页面中:

    设置oIframe.src = oIframe.src + "#" + sendValue

    子页面中:

    //每隔1秒种来看父页面有没有改自己的hash值,有的话说明有信息传给我
    var lastHash = window.location.hash;
    setInterVal(function(){
        if(lastHash != window.location.hash) {
            console.log(location.hash.slice(1));
            lastHash = window.location.hash;
        }
    }, 1000)

     

    展开全文
  • 本篇文章小编将为大家介绍,关于Iframe如何跨域访问Cookie和Session的解决方法,有需要的朋友可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,823
精华内容 11,929
关键字:

iframe跨域

友情链接: 曲面拟合.rar