精华内容
下载资源
问答
  • iframe 跨域

    2016-01-14 14:48:37
    iframe跨域,里面包含四个文件,具体使用方式参考代码,
  • iframe跨域

    2019-04-23 13:44:17
    iframe是什么东西? ...使用iframe跨域要满足一个基本条件,父页面和子页面都是自己可以控制的,如果随便把iframe指向一个其他网站,想通过跨域手段操作它基本上是不可能的。 document.domai...

    iframe是什么东西?

    IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。

     

    页面嵌套iframe比较常见。使用iframe跨域要满足一个基本条件,父页面和子页面都是自己可以控制的,如果随便把iframe指向一个其他网站,想通过跨域手段操作它基本上是不可能的。

     

    document.domain

    是比较常用的跨域方法。实现最简单只能用于同一主域下不同子域之间的跨域请求。比如foo.com和img.foo.com之间,img2.foo.com与img1.foo.com之间。只要把两个页面的document.domain都指向主域就可以了,比如document.domain=’foo.com’;

    设置好后父页面和子页面就可以像同一个域下两个页面访问了。父页面通过ifr.contentWindow就可以访问子页面的window,子页面通过parent.windowparent访问父页面的window,接下来可以进一步获取dom和js。

     

    <!-- foo.com/a.html -->
    <iframe id="ifr" src="http://img.foo.com/b.html"></iframe>
    <script>
    document.domain = 'foo.com';
    function aa(str) {
        console.log(str);
    }
    window.onload = function () {
        document.querySelector('#ifr').contentWindow.bb('aaa');
    }
    </script>
    =============================================================

    <!-- img.foo.com/b.html -->


    <script>
    document.domain = 'foo.com';
    function bb(str) {
        console.log(str);
    }

    parent.aa('bbb');
    </script>

    =============================================
     

    Window.name

    只要不关闭浏览器,window.name可以在不同页面加载后依然保持。尝试在浏览器打开百度baidu.com,然后在控制台输入window.name='aaa';回车,接着在地址栏输入qq.com转到腾讯首页,打开控制台输入window.name查看它的值,可以看到输出了"aaa"

    例如子页面bar.com/b.html向父页面foo.com/a.html传数据。

    <!-- foo.com/a.html -->
    <iframe id="ifr" src="http://bar.com/b.html"></iframe>
    <script>
    function callback(data) {
        console.log(data)
    }
    </script>
    ==================================================

    <!-- bar.com/b.html -->
    <input id="txt" type="text">
    <input type="button" value="发送" οnclick="send();">


    <script>
    var proxyA = 'http://foo.com/aa.html';    // foo.com下代理页面
    var proxyB = 'http://bar.com/bb.html';    // bar.com下代理空页面

    var ifr = document.createElement('iframe');
    ifr.style.display = 'none';
    document.body.appendChild(ifr);

    function send() {
        ifr.src = proxyB;
    }

    ifr.onload = function() {
        ifr.contentWindow.name = document.querySelector('#txt').value;
        ifr.src = proxyA;
    }
    </script>

    ==============================================
    <!-- foo.com/aa.html -->
    top.callback(window.name)
     

    location.hash

    较常用,把传递的数据依附在url上
    例如获取子页面bar.com/b.html的高度及其他数据

     

    <!-- foo.com/a.html -->
    <iframe id="ifr" src="http://bar.com/b.html"></iframe>
    <script>
    function callback(data) {
        console.log(data)
    }
    </script>
    ================================================

    <!-- bar.com/b.html -->
    window.onload = function() {
        var ifr = document.createElement('iframe');
        ifr.style.display = 'none';
        var height = document.documentElement.scrollHeight;
        var data = '{"h":'+ height+', "json": {"a":1,"b":2}}';
        ifr.src = 'http://foo.com/aa.html#' + data;
        document.body.appendChild(ifr);
    }
    ========================================

    <!-- foo.com/aa.html -->
    var data = JSON.parse(location.hash.substr(1));
    top.document.getElementById('ifr').style.height = data.h + 'px';
    top.callback(data);
    ==========================================

    postMessage

    HTML5新增方法,现在浏览器及IE8+支持,简单易用高大上。

    .postMessage(message, targetOrigin)参数说明

    message: 是要发送的消息,类型为 String、Object (IE8、9 不支持)
    targetOrigin: 是限定消息接收范围,不限制请使用 '*'

    'message', function(e)回调函数第一个参数接收 Event 对象,有三个常用属性:

    data: 消息
    origin: 消息来源地址
    source: 源 DOMWindow 对象

     

    一个简单的父页面foo.com/a.html 和子页面 bar.com/b.html建立通信

    <!-- foo.com/a.html -->
    <iframe id="ifr" src="http://bar.com/b.html"></iframe>
    <script>
    window.onload = function () {
        var ifr = document.querySelector('#ifr');
        ifr.contentWindow.postMessage({a: 1}, '*');
    }
    window.addEventListener('message', function(e) {
        console.log('bar say: '+e.data);
    }, false);
    </script>
    ===================================================

    <!-- bar.com/b.html -->
    window.addEventListener('message', function(e){
        console.log('foo say: ' + e.data.a);
        e.source.postMessage('get', '*');
    }, false)
     

    展开全文
  • iframe跨域问题

    2019-03-07 11:33:04
    iframe跨域问题:Uncaught DOMException Blocked a frame with origin解决方法
  • 主要介绍了javascript iframe跨域详解的相关资料,需要的朋友可以参考下
  • 1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点。 JS...

    1.IFrame跨域访问:

    http://blog.csdn.net/fdipzone/article/details/17619673

    2.IFrame跨域访问自定义高度:

    由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点。

    JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属于不同域,JS禁止跨域访问。

    解决方案:使用一个连接A,B应用的桥梁页面bradge.jsp来解决。

    准备:

    应用A localhost:8080

    主页面:main.jsp/html

    <div class="information_box" style="display:block;">
    <iframe id="frame_content"  name="frame_content" src="http://localhost:8888/applicationB/jsp/invokeB.jsp" width="100%" height="0" scrolling="no" frameborder="0"></iframe>
    </div> 

    连接A,B应用的页面:bradge.jsp/html

    <script>
    function  pseth() { 
        var iObj = parent.parent.document.getElementById('frame_content');
        iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash; 
        iObj.style.height = iObjH.split("#")[1]+"px"; 
        //alert('bridge');
    }
    pseth();
    </script>

    应用B localhost:8888

    invokeB.jsp/html

    <div id="crossDomain">
    <iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe>
    </div>
    
    <script>
    function newIframe(){
        $("#iframeC").remove();
        hashH = document.documentElement.scrollHeight; 
        $("#crossDomain").html("<iframe id='iframeC' name='iframeC' src='http://localhost:8080/applicationA/jsp/bradge.jsp#"+hashH+"' width='0' height='0' style='display:none;'></iframe>");
        
        
    }
    function sethash(){
        newIframe();
    }
    sethash();
    </script>

     

    转载于:https://www.cnblogs.com/kuiyeit/p/6289709.html

    展开全文
  • iframe跨域访问示例

    2015-04-28 21:06:25
    iframe跨域访问示例
  • 由于前端javascript对跨域访问做了安全限制,所以javascript只能访问与包含它的文档在同一域名下的内容,接下来,小编通过此篇文章给大家介绍iframe跨域通信的封装,需要的朋友可以参考下
  • iframe 跨域访问session

    2015-01-28 00:08:19
    iframe 跨域访问session问题解决方法
  • MessengerJS-master(iframe跨域通信) MessengerJS-master(iframe跨域通信)
  • iframe跨域嵌套头部

    万次阅读 2020-09-27 09:13:31
    (原理是将平台的头部菜单代码作为消息跨域发送到第三方应用) 前提: 平台的头部菜单,使用的css,js ,png,jpg静态资源文件支持外链访问 例如:在第三方应用中 ,如下语句能访问到对应资源 <script src =...

    需求

    不同域名,使用iframe,想互相获取html
    
    请查找 navigator.rar文件
    
    

    实现思路

    使用js listener 消息发送html代码。
    
    
    
    
    头部公共菜单使用方法:
    
    (原理是将平台的头部菜单代码作为消息跨域发送到第三方应用)
    
    前提:
    	平台的头部菜单,使用的css,js ,png,jpg静态资源文件支持外链访问
    	例如:在第三方应用中 ,如下语句能访问到对应资源  
    		<script src ="www.pingtai.com/js">
    		<link src ="www.pingtai.com/css">
    		<img src = "www.pingtai.com/***.">
    		
    	平台,第三方通过message.js插件来传递头部菜单代码
    		
    
    安装步骤:
    
    	切忌:平台用的logo等静态资源文件一定是外链能够访问的!否则代码同步到第三方应用,他的logo显示不出来
    
    	上面说到是将平台头部菜单作为消息跨域发送,那么就有一个发送者(平台),一个接收者(第三方应用)
    	
    	
    	1:作为平台的开发者:发送头部菜单代码:
    
    		<script>
    			 window.onload = function(){
    				 var messenger = new Messenger('iframe1', 'header'); // header是消息的key
    				 
    				 messenger.addTarget(window.parent, 'parent'); 
    					var msg = document.getElementById("header").innerHTML;
    					messenger.targets["parent"].send(msg);
    				 }
    	
    		</script>
    		
    	2:作为第三方应用对接者
    	
    		2-1: 引用平台提供的css,js外链样式以及js 
    		2-2:  页面引用iframe src为平台提供的头部菜单页面	
    			 <iframe id="iframe" src="../platform/header.html" frameborder="0" style="display:none"></iframe>
    			 
    		2-3 在页面添加头部菜单的div
    				<div id="header">
    				</div> 
    		2-4 接受消息,将消息(此消息是平台发送的头部菜单的代码)放到2-3建的header里面
    		
    
    

    实现代码如下:

    message.js 代码

    window.Messenger = (function() {
    
        // 消息前缀, 建议使用自己的项目名, 避免多项目之间的冲突
        // !注意 消息前缀应使用字符串类型
        var prefix = "koolearn",
            supportPostMessage = 'postMessage' in window,
            lastHash = document.location.hash,
            intervalId,
            cacheId = 1,
            extend = function() {
                var args = arguments,
                    o = args[0],
                    len = args.length,
                    curr;
                for (var j = 1; j < len; j++) {
                    curr = args[j];
                    for (var i in curr) {
                        curr.hasOwnProperty(i) && (o[i] = curr[i]);
                    }
                }
                return o;
            };
    
        /**
         * [Target description]
         * @param {object} target Target 类, 消息对象
         * @param {string} name   名字,iframe的id
         * @param {string} prefix 前缀
         */
        function Target(target, name, prefix) {
            var errMsg = '';
            if (arguments.length < 2) {
                errMsg = 'target error - target and name are both required';
            } else if (typeof target != 'object') {
                errMsg = 'target error - target itself must be window object';
            } else if (typeof name != 'string') {
                errMsg = 'target error - target name must be string type';
            }
            if (errMsg) {
                throw new Error(errMsg);
            }
    
            this.target = target;
            this.name = name;
            this.prefix = prefix;
        }
    
        /**
         * 消息拼接
         * @param  {[string]} msg
         * @return {[string]}
         */
        Target.prototype.handleMsg = function(msg) {
            //prefix|name__Messenger__msg
            return this.prefix + '|' + this.name + '__Messenger__' + msg;
        };
    
        /**
         * 往 target 发送消息, 出于安全考虑, 发送消息会带上前缀
         * @type {[type]}
         */
        Target.prototype.send = supportPostMessage ?
            // IE8+ 以及现代浏览器支持
            function(msg) {
                this.target.postMessage(this.handleMsg(msg), '*');
            } :
            // 兼容IE 6/7
            function(msg, targetUrl) {
                targetUrl = (targetUrl || this.target.location || parent.location.href) + '';
                //修改hash
                this.target.location = targetUrl.replace(/#.*$/, '') + '#' + (+new Date) + (cacheId++) + '&' + this.handleMsg(msg);
            };
    
        /**
         * 默认配置项,目前就一个
         * @type {Object}
         */
        var defaultOpts = {
            delay: 200
        };
    
        // 信使类
        // 创建Messenger实例时指定, 必须指定Messenger的名字, (可选)指定项目名, 以避免Mashup类应用中的冲突
        // !注意: 父子页面中projectName必须保持一致, 否则无法匹配
        function Messenger(messengerName, projectName) {
            this.targets = {};
            this.name = messengerName;
            this.listenFunc = [];
            this.prefix = projectName || prefix;
            this.opts = extend({}, defaultOpts);
            this.initListen();
        }
    
        /**
         * set opts
         * @param {object} opts
         */
        Messenger.prototype.setOpts = function(opts) {
            this.opts = extend(this.opts, opts || {});
        };
    
        /**
         * 添加一个消息对象
         * @param {object} target
         * @param {string} name
         */
        Messenger.prototype.addTarget = function(target, name) {
            this.targets[name] = new Target(target, name, this.prefix);
        };
    
        /**
         * 移除一个消息对象
         * @param  {string} name
         * @return {}
         */
        Messenger.prototype.removeTarget = function(name) {
            delete this.targets[name];
        };
    
        /**
         * 初始化消息监听
         * @return {null}
         */
        Messenger.prototype.initListen = function() {
            var self = this;
            /**
             * [generalCallback description]
             * @param  {string} msg prefix|name__Messenger__msg
             * @return {[type]}     [description]
             */
            var generalCallback = function(msg) {
                if (typeof msg == 'object' && msg.data) {
                    msg = msg.data;
                }
    
                var msgPairs = msg.split('__Messenger__');
                var msg = msgPairs[1];
                var pairs = msgPairs[0].split('|');
                var prefix = pairs[0];
                var name = pairs[1];
    
                if (prefix + name !== self.prefix + self.name) {
                    console.warn('error ');
                    return;
                }
    
                for (var i = 0, len = self.listenFunc.length; i < len; i++) {
                    self.listenFunc[i](msg);
                }
            };
    
            //高级浏览器
            if (supportPostMessage) {
                if ('addEventListener' in document) {
                    window.addEventListener('message', generalCallback, false);
                } else if ('attachEvent' in document) {
                    window.attachEvent('onmessage', generalCallback);
                }
                return;
            }
    
            // 兼容IE 6/7
            intervalId && clearInterval(intervalId);
            intervalId = null;
            intervalId = setInterval(function() {
                var hash = document.location.hash,
                    re = /^#?\d+&/;
                if (hash !== lastHash && re.test(hash)) {
                    lastHash = hash;
                    generalCallback(hash.replace(re, ''));
                }
            }, self.opts.delay);
        };
    
        /**
         * 监听消息
         * @param  {Function} callback
         * @return {[type]}
         */
        Messenger.prototype.listen = function(callback) {
            var i = 0;
            var len = this.listenFunc.length;
            var cbIsExist = false;
            for (; i < len; i++) {
                if (this.listenFunc[i] == callback) {
                    cbIsExist = true;
                    break;
                }
            }
            if (!cbIsExist) {
                this.listenFunc.push(callback);
            }
        };
    
        /**
         * 注销监听
         * @return {[type]} [description]
         */
        Messenger.prototype.clear = function() {
            this.listenFunc.length = 0;
        };
    
        /**
         * 广播消息,给所有的消息对象发送消息
         * @param  {[type]} msg [description]
         * @return {[type]}     [description]
         */
        //低版本浏览器要求提供url 这里不行
        Messenger.prototype.send = function(msg) {
            var targets = this.targets,
                target;
            for (target in targets) {
                if (targets.hasOwnProperty(target)) {
                    targets[target].send(msg);
                }
            }
        };
        return Messenger;
    }());
    
    

    平台发送html代码方

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="utf-8" />
        <title>Html version | Angulr</title>
        <meta name="description" content="app, web app, responsive, responsive layout, admin, admin panel, admin dashboard, flat, flat ui, ui kit, AngularJS, ui route, charts, widgets, components" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <link href="css/top.css" rel="stylesheet"/>
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
    <div id="header">
    <nav class="navbar navbar-inverse navbar-static-top container-fluid fixed-top" role="navigation">
        <div class="navbar-header">
            <a><img src="C:/Users/Administrator/Desktop/navigator1/platform/images/logo1.png"/></a>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
            <div  class="nav navbar-nav nav_nav hidden-sm top-title" id="nav-nav">
                第三方应用名称
            </div>
            <ul class="nav navbar-nav navbar-right main-nav">
                <li class="btn-group">
                    <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="glyphicon glyphicon-bell" style="color: #fff;"></span>
                    </a> 
                    <ul class="dropdown-menu" style="margin-top: 9px;">
    
                        <li>
                            <a>&nbsp;应用1</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a>&nbsp;应用2</a>
                        </li>
    					  <li>
                            <a>&nbsp;应用2</a>
                        </li>
    					  <li>
                            <a>&nbsp;应用2</a>
                        </li>
                    </ul> 
                </li>
    
                <!-- Single button -->
                <li class="btn-group">
                    <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span style="color: #fff;">仲玮</span>
    					<span class="caret" style="border-top-color: #7793a7;"></span>
                    </a>
    
                    <!-- dropdown -->
                    <ul class="dropdown-menu" style="margin-top: 9px;">
    
                        <li>
                            <a>&nbsp;个人中心</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a>&nbsp;注销</a>
                        </li>
                    </ul>
                    <!-- / dropdown -->
                </li>
            </ul>
        </div>
    
    </nav>
    </div>
    
    <script src="js/message.js"></script>
    <script>
     window.onload = function(){
    	 var messenger = new Messenger('iframe1', 'header'); 
         
         messenger.addTarget(window.parent, 'parent'); 
    		var msg = document.getElementById("header").innerHTML;
    		messenger.targets["parent"].send(msg);
    	 }
    	
    </script>
    </body>
    </html>
    
    

    第三方接收html代码端

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
         <link href="../platform/css/bootstrap.min.css" rel="stylesheet"/>
         <link href="../platform/css/top.css" rel="stylesheet"/>
         <script src="../platform/js/jquery.js"></script>
         <script src="../platform/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <iframe id="iframe" src="../platform/header.html" frameborder="0" style="display:none"></iframe>
    
    <div id="header">
    </div> 
    
    这个header div下面就是第三方应用自己的页面内容
    
    
    <script src="../platform/js/message.js"></script>
    	<script type="text/javascript">
    	var messenger = new Messenger('parent', 'header'), 
                input = document.getElementById('message');
                messenger.listen(function(msg) { 
                    document.getElementById('header').innerHTML=msg;
                }); 
        </script>
    </body>
    </html>
    
    
    展开全文
  • iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
  • iframe自适应与iframe跨域自适应
    <iframe id="dataLoad" name="dataLoad" scrolling="no"
        frameborder="no" style="border: 0px;" width="980px" height="600px"
        marginheight="0" marginwidth="0" frameborder="0"
        src="http://localhost:8080/projectName/gis.action?pageType='true'&pwd=<s:property value="shUserInfo.xwh" escape="true" />"></iframe>

    本域:
        /**
     /**
             * iframe自适应加载
             * */
            function reSetIframe(){
                var iframe = document.getElementById("dataLoad");
                iframe.height = 200;
                  try{
                      var bHeight = iframe.contentWindow.document.body.scrollHeight;
                      var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                      var height = Math.max(bHeight, dHeight);
                      iframe.height = height+40;
                  }catch (ex){}
            }

    跨域:



        中间jsp(agent.jsp同主iframe在相同目录下)
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
            <%
                String path = request.getContextPath();
            %>
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
            <html>
                <script>
                    function pseth() {
                        var iObj = parent.parent.document.getElementById("dataLoad");//A和main同域,之所以可以访问节点
                        var iObjH = parent.frames["biframe"].location.href;//访问自个儿的location对象获取hash值
                        var bHeight = iObjH.split("?")[1];//操作dom
                        iObj.style.height = bHeight + "px";
            
                        parent.parent.document.getElementById("container_1000").style.height = (Number(bHeight) + 260)+ "px";
                    }
                    pseth();
                </script>
            </html>

            
        嵌套页面(iframe其他域下的jsp、action)
       
    <iframe id="biframe" name="biframe"  width="100%"  src="" style="display:none"></iframe>
        function sethash(){
                var b_height = document.getElementById("mtjy_con").scrollHeight;
                var b_iframe = document.getElementById("biframe");
                b_iframe.src =  "http://192.168.1.10:8080/projectName/agent.jsp?"+b_height;
            }
            window.οnlοad=sethash;


    展开全文
  • iframe 跨域 自动适应高度;iframe 跨域 自动适应高度;
  • iframe跨域访问

    2016-03-07 16:14:29
    iframe跨域访问
  •  前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据。  首先我们要简单了解下window.name和iframe的相关知识。iframe是html的一个标签,可以在网页中创建内联框架,...
  • 主要介绍了iframe跨域与session失效问题的解决办法,有需要的朋友可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,806
精华内容 11,122
关键字:

iframe跨域