跨域-降域

最新推荐文章于 2023-02-02 16:35:18 发布

吴小粥

最新推荐文章于 2023-02-02 16:35:18 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： ajax 跨域降域

本文链接：https://blog.csdn.net/wu_xiaozhou/article/details/52901374

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

页面a：

<html>
<style>
  .ct{
    width: 910px;
    margin: auto;
  }
  .main{
    float: left;
    width: 450px;
    height: 300px;
    border: 1px solid #ccc;
  }
  .main input{
    margin: 20px;
    width: 200px;
  }
  .iframe{
    float: right;
  }

  iframe{
    width: 450px;
    height: 300px;
    border: 1px dashed #ccc;
  }
</style>

<div class="ct">
  <h1>使用降域实现跨域</h1>
  <div class="main">
    <input type="text" placeholder="http://a.wuxiaozhou.com/a.html">
  </div>

  <iframe src="http://b.wuxiaozhou.com/b.html" frameborder="0" ></iframe>

</div>


<script>
//URL: http://a.wuxiaozhou.com/a.html

document.querySelector('.main input').addEventListener('input', function(){
  console.log(this.value);
  window.frames[0].document.querySelector('input').value = this.value;
})


document.domain = "wuxiaozhou.com"



</script>
</html>

页面b：

<html>
<style>
    html,body{
        margin: 0;
    }
    input{
        margin: 20px;
        width: 200px;
    }
</style>

    <input id="input" type="text"  placeholder="http://b.wuxiaozhou.com/b.html">
<script>

// URL: http://b.wuxiaozhou.com/b.html

document.querySelector('#input').addEventListener('input', function(){
    window.parent.document.querySelector('input').value = this.value;
})

document.domain = 'wuxiaozhou.com';

</script>
</html>