iframe的网址获取父网址

290 阅读1分钟

需求 有一个网站需要嵌入别的网站,要求正常打开网站,调后端的接口是正常请求后端的地址,当嵌入别的网址时候,请求的域名为当前网站的域名

image.png

解决思路

当访问网站的时候,我就需要判断一下当前浏览器域名。我们怎么拿到呢。 image.png

插件名字是(Live Server),图里面写错了 image.png

image.png

image.png

代码案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>one</div>
  <button onclick="createFrame()">点击</button>
  <iframe id="myframe" src="">
    <p>你的浏览器不支持iframes。</p>
  </iframe>
  <script>
    console.log(parent.location);
    function createFrame() {
      document.getElementById('myframe').src = 'http://127.0.0.1:5502/iframe/two.html'
    }
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>two</div>
  <script>
    console.log(window.location)
    console.log(parent.location)
  </script>
</body>
</html>

上面的情况是同源情况下才可以使用的,跨域打印parent已经会报错了(我在公司用谷歌80版本的是会报错的,但是现在输出的parent是global)

image.png

image.png

image.png 跨域是通过node.js返回html模拟的 node写一个returnHTML.js

var http = require('http');
var fs = require('fs')
var server = http.createServer(function(req, res){
    var readStream = fs.createReadStream(__dirname + '/one.html', 'utf-8');

    res.writeHead(200, {
        'Content-Type': 'text/html'
    });

    readStream.pipe(res); // 管道方式发送 html 内容到客户端
});

server.listen(8888, '127.0.0.1'); // 监听本机上的 8888 端口

console.log('server is listening 8888');

在创建一个one.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>one</div>
  <button onclick="createFrame()">点击</button>
  <iframe id="myframe" src="">
    <p>你的浏览器不支持iframes。</p>
  </iframe>
  <script>
    console.log(parent.location);
    function createFrame() {
      document.getElementById('myframe').src = 'http://127.0.0.1:5500/iframe/two.html?sspToken=111'
    }
  </script>
</body>
</html>

two.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>two</div>
  <script>
    console.log(window.location.href)  // 输出的是 http://127.0.0.1:5500/iframe/two.html?sspToken=111
    if (parent !== window && window.location.href.indexOf('sspToken') > -1) {
      var url = null;
      try {
          url = parent.location.href; 
      }catch (e) { 
        console.log('jinru')
          url = document.referrer; 
      } 
      console.log(url)
    }
   else {
      console.log('parent==window')
    }
    console.log('haha')
  </script>
</body>
</html>