html5关于外链嵌入页面通信问题(postMessage解决跨域通信)

admin html5 2022-02-05 15:17:14 html5 外链嵌入页面通信 postMessage 跨域通信"
说起来挺简单的，可以直接去查询postMessage推送和window.addEventListener接收使用方式，能自己搞明白是最好的，本文章也只是记录一下自己的使用方式
使用postMessage推送和window.addEventListener接收
原理：
发送方使用postMessage方法向接收方推送消息，第一个参数为推送的内容，第二个参数是允许被访问的域名；
接收方通过监听message的方法接收数据。
实现跨域就需要有两个不同源的服务器咯
开始
iframe引入页面（我也是使用这样方式）
父页面（发送方）


    
    

    
 
    
</body></pre>

<p>关于发送简单解释一波：</p>

<pre class="brush:xhtml;">
<iframe name="myframe" src ="http://localhost:8000/#/home1?type=light" id="childframe" width="1400px" height="800px">
</pre>

<p>这里里面的src是子页面的地址（这里是根据你自己写的路由或者那个页面要监听写的地址）。</p>

<pre class="brush:js;">
postMessage({ text:'你收到了没有呀（黑夜）', action : 'dark' }, 'http://localhost:8000/#/')
</pre>

<p>第一个参数是内容，第二是子页面的地址，这里可以只写项目地址就可以还有写的（例如：postMessage(‘内容’, '')），我是没试过但应该也可以。</p>
<p><strong>子页面（接收方+反馈）</strong></p>
<p>我这边接收是直接在我但react项目里写的</p>

<pre class="brush:js;">
 componentWillMount() {
    window.addEventListener('message', (e) => {
      console.log(e)
      let data= e.data //这就是接收到的数据
                       //e.origin这是发送数据的地址
   })
   
   ...
   ...
   ...
   //关于反馈我是在我项目里写了一个点击动作发送的如下
   goCustomerDetail=(data)=>{
    let url = data.url
            // window.top.postMessage({
            //     text:'返回Url',
            //     url:url
            // }, 'http://XXX:8083/ceshi/ceshi.html')
            
            window.top.postMessage('{"name":"客户详情","path":"'+url+'"}', '*')
    }
</pre>

<p>关于上面接收反馈解释一波：<br />
1、 接收 window.addEventListener('message', (e) => {console.log(e) })<br />
其中e是整个接收到的消息体里面有很多内容，自己拿使用的数据，注意这里应该加判断符合条件后在进行一些操作<br />
2、发送方式，我自己实验两种反馈，父页面都能收到<br />
注意是用 window.top.postMessage反馈</p>
<p><span style="color: #ff0000"><strong>结束</strong></span></p>
<p>总结：这个方式还是很好用的，可以不同技术栈通信外链，但是安全方面不是很好，而且需要会出现跨域问题数据请求不到或者接口被拦截，需要自己打开接口设置一波继续访问。</p>
<p>附赠：还有其它方式的引入我自己没用过，参考链接分享</p>
<p><a href="https://www.iwyv.com/d/files/20220205/un42zczil22">https://www.iwyv.com/d/files/20220205/un42zczil22</a><br />
<a href="https://www.iwyv.com/d/files/20220205/kljpg21mmty.html">https://www.iwyv.com/d/files/20220205/kljpg21mmty.html</a><br />
<a href="https://www.iwyv.com/d/files/20220205/fxdj001sjse">https://www.iwyv.com/d/files/20220205/fxdj001sjse</a></p>
<p>到此这篇关于html5关于外链嵌入页面通信问题(postMessage解决跨域通信)的文章就介绍到这了,更多相关html5外链嵌入通信内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章，希望大家以后多多支持潘少俊衡！</p>
						
						
						<span id="art_bot" class="jbTestPos"></span> 
        </div>
        <div class="pagebar">  </div>
        <div class="pcd_ad"><script src=/d/js/acmsd/thea14.js></script></div>
        <div class="mbd_ad">
          <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5850285417076520"
     data-ad-slot="9825815134"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
        </div>
        <div class="rights">
          <h5>版权声明</h5>
          <p>本文仅代表作者观点，不代表本站立场。<br>
            本文系作者授权发表，未经许可，不得转载。<br>本文地址：/web/html5/73107.html</p>

<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"share":{},"image":{"viewList":["fbook","twi","linkedin","qzone","tsina","douban","weixin","evernotecn"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?'];</script>

        </div>


<div class="r-pn-post">
               
<div class="shang"><a title="canvas实现图片镜像翻转的2种方式" href="/web/html5/73106.html" rel="bookmark" class="prev_p"><span>上一篇 :</span> canvas实现图片镜像翻转的2种方式 
</a></div>
<div class="xia"><a href="/web/html5/73108.html" rel="bookmark" class="next_p"><span>下一篇 :</span> HTML5跳转小程序wx-open-launch-weapp的示例代码</a></div>

              
              <div class="clear"></div>
            </div>
      </div>
      <div class="related">
        <h4>相关文章</h4>
        <ul>
        <li> <a href="/websafe/yejie/149951.html">
            <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/2015925104031825.jpg?2015825104041" alt="HTML5安全风险之CORS攻击详解"></div>
            <p>HTML5安全风险之CORS攻击详解</p>
            </a> </li><li> <a href="/websafe/yejie/149948.html">
            <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/201592694628148.jpg?201582694643" alt="HTML5安全风险之Web Storage攻击详解"></div>
            <p>HTML5安全风险之Web Storage攻击详解</p>
            </a> </li><li> <a href="/websafe/yejie/149962.html">
            <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/201592695532854.jpg?201582695542" alt="HTML5安全风险之WebSQL攻击详解"></div>
            <p>HTML5安全风险之WebSQL攻击详解</p>
            </a> </li><li> <a href="/websafe/yejie/149954.html">
            <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/2015926100223685.jpg?201582610234" alt="HTML5安全风险之Web Worker攻击详解"></div>
            <p>HTML5安全风险之Web Worker攻击详解</p>
            </a> </li><li> <a href="/websafe/yejie/149949.html">
            <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/2015926101350915.jpg?201582610140" alt="HTML5安全风险之劫持攻击详解"></div>
            <p>HTML5安全风险之劫持攻击详解</p>
            </a> </li><li> <a href="/websafe/yejie/149956.html">
            <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/2015926102727491.jpg?2015826102742" alt="HTML5安全风险之API攻击详解"></div>
            <p>HTML5安全风险之API攻击详解</p>
            </a> </li><li> <a href="/websafe/yejie/149950.html">
            <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/2015927101907952.jpg?2015827101945" alt="HTML5安全攻防之新标签攻击详解"></div>
            <p>HTML5安全攻防之新标签攻击详解</p>
            </a> </li><li> <a href="/websafe/yejie/149952.html">
            <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/2015927103421635.jpg?2015827103440" alt="HTML5对安全的改进 HTML5安全攻防详析终结篇"></div>
            <p>HTML5对安全的改进 HTML5安全攻防详析终结篇</p>
            </a> </li>        </ul>
      </div>
      <div class="post_comments">
        <div id="comment">
<link href="/skin/ecmspl/css/pl.css" rel="stylesheet">
<div class="showpage" id="plpost">
<table width="100%" border="0" cellpadding="0" cellspacing="0"  style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;">
<tr><td><strong><font color="#333333">留言与评论（共有 <span id="infocommentnumarea">0</span> 条评论）</font></strong></td></tr>
</table>
<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您没什么话要说吗？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script>
<form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">
<tr>
<td>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td>
<script src="/e/pl/loginjspl.php"></script>
<textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定，不要发布广告和违法内容!"></textarea>
<script src="/d/js/js/plface.js"></script>&nbsp;&nbsp;&nbsp;
<table width='100%' align='left' cellpadding=3 cellspacing=1 bgcolor='#FFF'>
<tr>
<td width="80%" height="40" bgcolor="#FFFFFF">验证码：<input name="key" type="text" class="inputText" size="16" />
<img src="/e/ShowKey/?v=pl" align="absmiddle" name="plKeyImg" id="plKeyImg" onclick="plKeyImg.src='/e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新" /> 
</td> 
<td width="20%" height="40" bgcolor="#FFFFFF"> 
<input name="sumbit" type="submit" value="提交评论" tabindex="6" style="border-radius: 5px;font-size: 16px;background: #e94c3d none repeat scroll 0% 0%;border: 0px none;margin: 0px 16px;padding: 1px 16px;height: 33px;line-height: 30px;color: rgb(255, 255, 255);opacity: 0.95;">
<input name="id" type="hidden" id="id" value="73107" />
<input name="classid" type="hidden" id="classid" value="47" />
<input name="enews" type="hidden" id="enews" value="AddPl" />
<input name="repid" type="hidden" id="repid" value="0" />
<input type="hidden" name="ecmsfrom" value="/web/html5/73107.html">
</td>
</tr>  
</table> 
</td>
</tr>
</table>
</td>
</tr>
</table></form>
	<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
        <tr>
          <td bgcolor="#FFFFFF" id="infocommentarea"></td>
        </tr>
        </table>
 <script src="/e/extend/infocomment/commentajax.php?classid=47&id=73107"></script>
</div>	
        </div>
      </div>
<div class="pcd_ad"><script src=/d/js/acmsd/thea18.js></script></div>
        <div class="mbd_ad">
          <!-- 手机广告位-评论底部广告位新 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5850285417076520"
     data-ad-slot="9383780240"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script type="text/javascript" src="//gg.iwyv.com/production/mh_g/i/static/wi_djn.js"></script>        </div>
    </div>
    <!--@ mainl-->
    
    <div class="mainr">
    <div class="widget widget_ad">
    <script src=/d/js/acmsd/thea14.js></script>
    </div>
      <div class="widget widget_hotpost">
        <h4>热门文章</h4>
        <ul>
                          <li><i class="red">1</i><a href="/web/html5/75947.html" target="_blank">基于HTML5超酷摄像头（HTML5 webcam）拍照功能实现代码</a></li>
                         <li><i class="red">2</i><a href="/web/html5/73062.html" target="_blank">Html5饼图绘制实现统计图的方法</a></li>
                         <li><i class="red">3</i><a href="/web/html5/73961.html" target="_blank">钉钉企业内部H5微应用开发详解</a></li>
                         <li><i>4</i><a href="/web/html5/72861.html" target="_blank">前端监听websocket消息并实时弹出(实例代码)</a></li>
                         <li><i>5</i><a href="/web/html5/72866.html" target="_blank">html实现弹窗的实例</a></li>
                         <li><i>6</i><a href="/web/html5/72874.html" target="_blank">HTML5轮播图全代码</a></li>
                         <li><i>7</i><a href="/web/html5/72875.html" target="_blank">使用PDF.js渲染canvas实现预览pdf的效果示例</a></li>
                         <li><i>8</i><a href="/web/html5/75147.html" target="_blank">HTML5实现自带进度条和滑块滑杆效果</a></li>
                         <li><i>9</i><a href="/web/html5/75201.html" target="_blank">canvas实现按住鼠标移动绘制出轨迹的示例代码</a></li>
                         <li><i>10</i><a href="/web/html5/73050.html" target="_blank">uniapp+Html5端实现PC端适配</a></li>
               </ul>
      </div>
      <div class="widget widget_ad">
    <script src=/d/js/acmsd/thea10.js></script>
    </div>
      <div class="widget widget_previous">
        <h4>最近发表</h4>
        <ul>
                  <li><a href="/ITzixun/178187.html">日本雷蛇官网实习生上错价了？游戏本只卖15950日元？</a></li>
                  <li><a href="/youxi/175574.html">《原神》物归原主又归原主世界任务指南 游戏攻略</a></li>
                  <li><a href="/youxi/175631.html">《原神》振晶的研究第三天试用角色2000分攻略 游戏攻略</a></li>
                  <li><a href="/youxi/175559.html">《原神》2.6版全旋曜玉帛点位说明_蒙德 游戏攻略</a></li>
                  <li><a href="/youxi/175547.html">《原神》2.6版深渊11-1守护镇石技巧 游戏攻略</a></li>
                  <li><a href="/youxi/175604.html">《原神》神里绫华装备搭配推荐 游戏攻略</a></li>
                  <li><a href="/youxi/175516.html">《原神》云堇突破材料获取方法 游戏攻略</a></li>
                  <li><a href="/youxi/175494.html">《原神》世界任务他乡迷失客攻略 游戏攻略</a></li>
                  <li><a href="/youxi/175497.html">《原神》神里绫华全面培养指南 神里绫华技能详解与出装建议 游戏攻略</a></li>
                  <li><a href="/youxi/175460.html">《原神》神里绫人平民向大世界配队思路 游戏攻略</a></li>
                </ul>
      </div>
      <div class="widget widget_ad">
    <script src=/d/js/acmsd/thea11.js></script>
    </div>
      <div class="widget widget_tags">
        <h4>标签列表</h4>
        <ul>
            <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%BC%80%E6%94%BE%E4%B8%96%E7%95%8C">开放世界</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E6%B2%99%E7%9B%92">沙盒</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=win10">win10</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=3D%E8%AE%BE%E8%AE%A1">3D设计</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=PS">PS</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E9%AC%BC%E8%B0%B7%E5%85%AB%E8%8D%92">鬼谷八荒</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=win7">win7</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E6%89%8B%E6%B8%B8">手游</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%9B%A2%E9%98%9F%E7%AB%9E%E6%8A%80">团队竞技</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%8E%9F%E7%A5%9E">原神</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E4%BA%8C%E6%AC%A1%E5%85%83%E6%B8%B8%E6%88%8F">二次元游戏</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%AD%96%E7%95%A5">策略</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%94%B5%E8%84%91%E5%B8%B8%E8%AF%86">电脑常识</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80">王者荣耀</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%85%A7%E7%89%87%E5%A4%84%E7%90%86">照片处理</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=MySQL">MySQL</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%90%83%E9%B8%A1">吃鸡</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%AC%94%E8%AE%B0%E6%9C%AC">笔记本</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%BB%9D%E5%9C%B0%E6%B1%82%E7%94%9F%E5%A4%A7%E9%80%83%E6%9D%80">绝地求生大逃杀</a></li>         <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%B0%84%E5%87%BB%E7%AB%9E%E4%BA%89">射击竞争</a></li>            </ul>
      </div>
<div class="widget widget_ad">
    <script src=/d/js/acmsd/thea12.js></script>
    </div>
    </div>
  </div>
</div>
<script type="text/javascript"> 
// JavaScript Document
function goTopEx(){
        var obj=document.getElementById("goTopBtn");
        function getScrollTop(){
                return document.documentElement.scrollTop || document.body.scrollTop;
            }
        function setScrollTop(value){
            if(document.documentElement.scrollTop){
                    document.documentElement.scrollTop=value;
                }else{
                    document.body.scrollTop=value;
                }
                
            }    
        window.onscroll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none";
                    var h=document.body.scrollHeight - getScrollTop() - obj.offsetTop - obj.offsetHeight;
                    obj.style.bottom=0+"px";
                    if(h<350){
                        obj.style.bottom=340+"px";
                        obj.style.top="auto";
                    }

        
        }
        obj.onclick=function(){

            var goTop=setInterval(scrollMove,10);
            function scrollMove(){
                    setScrollTop(getScrollTop()/1.1);
                    if(getScrollTop()<1)clearInterval(goTop);

                }
        }
    }

</script> 
<!--向上 -->

<div id="jz52top" > <span>
  <DIV style="DISPLAY: none" id="goTopBtn" ><a title="返回顶部" class="jz52topa" ><b>返回顶部</b></a></DIV>
  </span> 
  <SCRIPT type=text/javascript>goTopEx();</SCRIPT> 
  <span>
  <ul id="navmenu">
    <li><a title="QR Code"  class="jzqr"  ><b>QR Code</b></a>
      <ul>
        <div id="jzqrn"> <img src="/skin/ecms172/images/weixin.png"  width="228" height="228" />
          <p>打开手机扫描上面的二维码</p>
        </div>
      </ul>
    </li>
  </ul>
  </span> </div>
<!--向上完 --> 

<!-- 底部广告--> 

<!-- 底部广告--> 

<!--底部信息 -->
<div class="ft_wp">
  <div id="ft" class="wp cl ftddd" >
    <div class="ft_info" >
      <div class="ft_z1">
        <p>潘少俊衡</p>
      
        <h3 class="ft_z_zdxx_zx">
          <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?1cc50873f5e983e8073d99a425b87921";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
          <span class="pipe"> | </span>
          桂ICP备2023010378号-4        </h3>
        <h2 class="ft_z_zdxx_zx">
          <p style="font-size:12px;">Powered By <a href="https://www.iwyv.com/" title="潘少俊衡" target="_blank">EmpireCMS</a> </p>
        </h2>
      </div>
 
     <div class="ft_z2">


      </div>
 
      <div class="ft_z2">


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XFMBHZNTEL"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XFMBHZNTEL');
</script>


        <p><a target="_blank" href="https://www.iixiang.com/">爱享小站</a></p>
<p><a target="_blank" href="https://www.sdzdyn.com/">中德益农</a></p>
       <p><a target="_blank" href="https://www.guujie.com">谷姐神农</a></p>
<p><a target="_blank" href="https://huanyafeiliao.com/">环亚肥料</a></p>
      </div>
      <div class="ft_z2">
    
 <p><a target="_blank" href="https://beian.miit.gov.cn/Integrated/index">桂ICP备2023010378号-4</a></p>
   <p><a href="https://beian.miit.gov.cn" title="桂公网备 45012202000125号" target="_blank">桂公网备 45012202000125号</a></p>    
      </div>
      <div class="ft_z2">
      
        <p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">联系我们</a></p>
      </div>
      <div class="ft_z2">
        <p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">商业合作</a></p>
 
        <p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">广告投放</a></p>
        <p><a target="_blank" href="/tgxz/">投稿须知</a></p>
      </div>
      <div class="ft_bx"style="left:335px;"> </div>
      <div class="ft_bx  ft_t1"> </div>
      <div class="ft_bx  ft_t2"> </div>
      <div class="ft_bx  ft_t3"> </div>
      <div class="ft_bx  ft_t4"> </div>
      <div class="ft_z3">
        <dd> <span><img src="/skin/ecms172/images/weixin.png"  width="75" height="72.2" /></span>
          <p> 
            <!-- 引用官方图标 -->
            
         
          <!-- 引用官方图标百度统计 -->


          </p>
          <p>使用手机软件扫描微信二维码</p>
          <p>关注我们可获取更多热点资讯</p>
          <p>感谢潘少俊衡友情技术支持</p>
        </dd>
      </div>
    </div>
  </div>
</div>
<div class="clear"></div>
<!--底部信息完 --> 

<script src="/skin/ecms172/js/common.min.js" type="text/javascript"></script> 
<script></script>
</body>
</html>
1000元配置

2000元配置

3000元配置

4000元配置

5000元配置

6000元配置

7000元配置

8000元配置

9000元配置

万元配置

i3配置

i5配置

i7配置

APU配置

R5配置

R7配置

游戏攻略

软件教程

Win10教程

Win7教程

Mac教程

Linux教程

U盘教程

Server教程

html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
