当前位置:首页 > 前端解决跨域的常用方法之js 跨域复习 window.name | window.domain | iframe | Jsonp

前端解决跨域的常用方法之js 跨域复习 window.name | window.domain | iframe | Jsonp

发布于 2018-04-11 阅读 1073 次 Javascript HTML5

引起跨域的原因:

浏览器的同源策略,但是当你要发送请求的时候,出于安全性问题,浏览器有严格的要求,必须协议,域名,端口都相同,这个就是同源策略。
影响:a通过js脚本向b发送ajax请求,不同源就会报错
不受影响:script标签,img标签等外部资源引用,重定向,表单提交都不受影响

iframe遇到的跨域问题

情况一、

假设有a.com/main.html ; a.com/b.html
这种情况是涉及不到跨域的

main.html代码:

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Document</title>
  5. </head>
  6. <body>
  7. <div class="box">
  8. <iframe id="if" src="b.html" frameborder="0"></iframe>
  9. </div>
  10. <script>
  11. //获取b的数据
  12. var bdoc = window.frames[0].document;
  13. //通过bdoc做操作
  14. </script>
  15. </body>
  16. </html>

b.html代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. <input id="message" type="text" />
  9. <script>
  10. //获取父窗docuemnt
  11. var pdoc = parent.document;
  12. </script>
  13. </body>
  14. </html>

情况二、

假设有a.com/main.html ; b.a.com/b.html 此时主域相同子域不同

只需要在两个页面同时显式的设置docuement.domian = “a.com”即可

情况三、

主域不同 假设有页面 a.com/main.html ; a.com/blank.html ; b.com/b.html
此时可以利用window.name实现消息传递,具体做法如下:

b.html代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. <input id="message" type="text" />
  9. <script>
  10. window.name = "我是要传递的消息";
  11. </script>
  12. </body>
  13. </html>

a.html

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Document</title>
  5. </head>
  6. <body>
  7. <div class="box">
  8. <iframe id="if" src="b.com/b.html" frameborder="0"></iframe>
  9. </div>
  10. <script>
  11. var fr = document.getElementById('if'),
  12. state = 0;;
  13. if(window.VBArray){//兼容ie
  14. fr.onreadystatechange = function(){
  15. if(this.readyState == 'complete'){
  16. if(state == 1){
  17. // 获取数据
  18. data = fr.contentWindow.name;
  19. }else{
  20. state = 1;
  21. // 重置iframe窗口的src保证同源
  22. fr.src = 'a.com/blank.html';
  23. }
  24. }
  25. }
  26. }else{
  27. fr.addEventListener('onload',function(){
  28. if(state == 1){
  29. // 获取数据
  30. data = fr.contentWindow.name;
  31. }else{
  32. state = 1;
  33. // 重置iframe窗口的src保证同源
  34. fr.src = 'a.com/blank.html';
  35. }
  36. },false);
  37. }
  38. </script>
  39. </body>
  40. </html>

注意:window.name最大存储2M,只能存储字符串格式。由于此方法会重新加载空页面作为iframe的源,所以只适用于隐藏iframe的情况

还有一种方式通过document.hash

由父窗口修改子窗口的src添加hash,hash就是要传递的数据,修改hash不会导致页面刷新,子窗口通过一个定时器,定时检测hash是否变化,从而获取父窗口给的数据。