Community Learn Tools Library Leisure
search
English
javascript - 怎么解决iframe自适应？
怪我咯
怪我咯 2017-04-11 12:42:45
0
2
373

我在一页面设置一iframe，想让iframe的高度能够根据src源的页面的高度而自适应，我用contentDocument来获得iframe的document，可是当我的页面的域和iframe不同时谷歌他会报安全错误，而无法正确的获取到iframe的document，应该如何解决这个问题；
例如下面的例子样：
我的父页面在http://hij.kmn.net:8088/demo....

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <iframe src="http://abc.efg.net:8088/" frameborder="0" id="iframepage" onLoad=iFrameHeight()></iframe>
</body>
 <script type="text/javascript">
  function iFrameHeight() {  
var ifm= document.getElementById("iframepage");   
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   

 console.log(ifm,subWeb)
if(ifm != null && subWeb != null) {

   ifm.height = subWeb.body.scrollHeight;
   ifm.width = subWeb.body.scrollWidth;
}   
}  
;
</script>
</html>

就会报错：
Uncaught SecurityError: Blocked a frame with origin "http://hij.kmn.net:8088/" from accessing a frame with origin "http://abc.efg.net:8088/". Protocols, domains, and ports must match.
这种情况该怎样解决，如同一域下面是可以正常的！就是不同域下有什么方法解决这个问题没？

怪我咯
怪我咯

走同样的路，发现不同的人生

reply all(2)
Ty80
Ty802017-04-11 12:44:45 2 floor

用postMessage可实现iframe跨域的通信

外部窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h5>index.html</h5>
    <button type="button" onclick="test()">test</button>
    <iframe src="http://abc.efg.net:8088/" frameborder="0" id="ifm"></iframe>
    <script>
        function getSize(){
            var ifm = document.getElementById('ifm');

            window
            [window.attachEvent ? "attachEvent" : "addEventListener"]
            (window.attachEvent ? 'onmessage' : 'message',handleResult,false);
            
            //届时把*替换成iframe的域名，如http://abc.efg.net:8088/
            ifm.contentWindow.postMessage('getSize','*');

            function handleResult(ev){

                window
                [window.detachEvent ? 'detachEvent' : 'removeEventListener']
                (window.detachEvent ? 'onmessage' : 'message',handleResult);

                var data = JSON.parse(ev.data);
                console.log('height: ' + data.height);
                console.log('width: '  + data.width);
            }
        }
        
        function test(){
            getSize();
        }
    </script>
</body>
</html>

iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h5>child.html</h5>
    <script>
        function tellSize(ev){
            if(ev.data === 'getSize'){
                var height = document.body.scrollHeight;
                var width = document.body.scrollWidth;
                //届时把*替换成父窗口的域名，如http://hij.kmn.net:8088/
                window.parent.postMessage(JSON.stringify({height:height,width:width}),'*');                
            }
        }

        window
        [window.attachEvent ? "attachEvent" : "addEventListener"]
        (window.attachEvent ? 'onmessage' : 'message',tellSize,false);
    </script>
</body>
</html>

不过，考虑许多跨域的安全问题，光这样还不够的，你还需要做一些安全检查，具体百度postMessage吧。

Like +0
Add Reply
黄舟
黄舟2017-04-11 12:44:45 1 floor

https://segmentfault.com/q/10...

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template