iframe嵌套页面跨域,如何设置iframe高度自适应在跨域情况下的可用方法_javascript技巧
iframe嵌套页面跨域,如何设置iframe高度自适应在跨域情况下的可用方法_javascript技巧详细介绍
本文目录一览： iframe嵌入页面,两者ip不同
iframe嵌入页面，两者ip不同是由跨域的问题引起的。浏览器地址栏中的IP不同或网址中的域名不同都属于跨域的情况。
如何设置iframe高度自适应在跨域情况下的可用方法_javascript技巧
在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法。在父页面中给定一个不带滚动条的iframe，然后对属性src指定一个可加载的页面，这样当父页面被访问的时候，子页面可以被自动加载。iframe的高度需要根据子页面的实际高度来进行调整。如果iframe的高度小于子页面的实际高度，超出的部分无法显示；相反，如果iframe的高度过高，则页面上会出现大量的空白区域。我们可以通过属性或者CSS来设置iframe的高度，当不确定子页面内容的高度时，也可以通过脚本来进行动态指定。但是如果子页面不在同一域中怎么办？这时候脚本没有办法获取到子页面的高度，存在JavaScript跨域的问题！ 如题所述，本文在介绍可用方法的同时，也向大家询问除下文列出来的方法之外是否还有其它方法可寻？ 通过属性或CSS来设置iframe的高度这里就不再具体介绍了。首先来看看如何通过脚本进行设置。 代码如下: function ChangeFrameHeight(id) { var count = 1; (function() { var frm = document.getElementById(id); var subWeb = document.frames ? document.frames[id].document : frm.contentDocument; if (subWeb != null) { var height = Math.max(subWeb.body.scrollHeight, subWeb.documentElement.scrollHeight); frm.height = height; } if (count count = count + 1; window.setTimeout(arguments.callee, 2000); } })(); } 假设iframe子页面和父页面都在同一域内，通过该脚本可以对给定id的iframe高度进行动态调整。为了防止父页面在子页面之前加载完成，该函数会每隔2秒重新执行一次，一共执行3次。极端情况下子页面的加载速度会慢于父页面，可适当对执行次数和时间做调整。 代码如下: 如果遇到子页面跨域的问题，可通过HTML5的postMessage来实现，但前提是子页面需要主动向父页面发送信息。下面是子页面部分： 代码如下: Got post? Lots of stuff here which will be inside the iframe. 在父页面中获取到子页面传递过来的信息，然后对iframe的高度进行调整。 代码如下: function resizeCrossDomainIframe(id, other_domain) { var iframe = document.getElementById(id); window.addEventListener('message', function(event) { if (event.origin !== other_domain) return; // only accept messages from the specified domain if (isNaN(event.data)) return; // only accept something which can be parsed as a number var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar iframe.height = height + "px"; }, false); } 有关如何使用HTML5的postMessage()方法可以查看这篇文章http://dev.w3.org/html5/postmsg/#web-messaging 但是在大多数情况下，iframe中所引用的子页面除了和父页面不在同一域之外，我们可能根本无法对子页面进行任何操作，或者说子页面根本没有提供Corss-document messaging功能。在这种情况下，通过postMessage()方法也无法获取到子页面的任何信息。由于无法和子页面进行任何交互，也就没有办法得知子页面的document对象，从未无法根据子页面的实际高度来调整父页面iframe的height属性了。 目前没有其它实际有效的方法来处理上面遇到的问题。默认情况下可以给iframe指定一个比较大的高度，这样假设所引用的子页面内容不会超出范围，除了在页面上会留下部分空白区域外，内容显示基本不会有问题。 那是否还存在其它比较有效的解决方法呢？期待！
跨域问题怎么解决
跨域就是当在页面上发送ajax请求时，由于浏览器同源策略的限制，要求当前页面和服务端必须同源，也就是协议、域名和端口号必须一致。JSONP方式解决跨域：jsonp的原理就是利用了script标签不受浏览器同源策略的限制，然后和后端一起配合来解决跨域问题的。具体的实现就是在客户端创建一个script标签，然后把请求后端的接口拼接一个回调函数名称作为参数传给后端，并且赋值给script标签的src属性，然后把script标签添加到body中，当后端接收到客户端的请求时，会解析得到回调函数名称，然后把数据和回调函数名称拼接成函数调用的形式返回，客户端解析后会调用定义好的回调函数，然后在回调函数中就可以获取到后端返回的数据了。CORS方式解决跨域：cors是跨域资源共享，是一种基于HTTP头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），使得浏览器允许这些origin访问加载自己的资源。服务端设置了Access-Control-Allow-Origin就开启了CORS，所以这种方式只要后端实现了CORS，就解决跨域问题，前端不需要配置。搭建Node代理服务器解决跨域：因为同源策略是浏览器限制的，所以服务端请求服务器是不受浏览器同源策略的限制的，因此我们可以搭建一个自己的node服务器来代理访问服务器。大概的流程就是：我们在客户端请求自己的node代理服务器，然后在node代理服务器中转发客户端的请求访问服务器，服务器处理请求后给代理服务器响应数据，然后在代理服务器中把服务器响应的数据再返回给客户端。客户端和自己搭建的代理服务器之间也存在跨域问题，所以需要在代理服务器中设置CORS。Nginx反向代理解决跨域：nginx通过反向代理解决跨域也是利用了服务器请求服务器不受浏览器同源策略的限制实现的。客户端请求nginx服务器，在nginx.conf配置文件中配置server监听客户端的请求，然后把location匹配的路径代理到真实的服务器，服务器处理请求后返回数据，nginx再把数据给客户端返回。postMessage方式解决跨域:window.postMessage方法可以安全地实现跨源通信，此方法一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。主要的用途是实现多窗口，多文档之间通信：页面和其打开的新窗口的数据传递，多窗口之间消息传递，页面与嵌套的iframe消息传递。Websocket方式解决跨域：使用Websocket也可以解决跨域问题，因为WebSocket本身不存在跨域问题，所以我们可以利用webSocket来进行非同源之间的通信，WebSocket规范定义了一个在Web浏览器和服务器之间建立“套接字”连接的API。简单来说：客户端和服务器之间存在持久连接，双方可以随时开始发送数据。
h5如何解决iframe跨域同源问题？
使用html5PostMessage方法，html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
跨域是什么意思
问题一：跨域是指什么,因为什么引起的?有哪些解决方案?web前端知识 跨域是指 不同域名之间相互访问 例如 我的电脑上有2个服务器 192.168.0.11 192.168.0.12 如果第一个服务器上的页面要访问第二个服务器 就叫做跨域 或者baidu 要访问xxx 也是不同域名 也是跨域
HTML5 里有个window.postMessage 方法，支持跨域访问，详情可以参考
webhek/window-postmessage-api
如果你的程序在服务器上，也可以进行相应的操作来完成跨域访问
纯手打 有问题欢迎咨询
问题二：ajax跨域和不跨域有什么区别 跨域的优势是能充分利用分布式集群系统，使某些服务压力可以分散到多台服务器上。但数据交互的安全性上有一定影响。
不跨域的优势是前台页面和后台服务都在一个服务器下，安全性高，但但不能分摊负载。
目前计算机行业正在向高集成，多并发，低耦合的方向发展。
所有基础服务以接口的方式提供是很好的一种方案（像百度地图，微信，支付宝都有服务接口），基础服务和中间件之间的交互也可能采用服务调用的方式，这些问题就牵扯到跨域，处理好跨域和安全的平衡点是这类集成系统的需要重点权衡的方面之一。
问题三：网页中跨域什么意思 简单比喻一下就是跨了两个域名，比如腾讯域名下的网页 去访问 百度下的网页了 ，跨域访问
问题四：什么是跨域访问 跨域访问就是你在一个域环境下阀访问另一个域的内容。
跨域访问前提是彼此相互信任，不然是没法访问的。
问题五：ajax跨域到底是什么意思？能否举个简单例子说明一下？ Ajax请求一个目标地址为非本域（协议、域名、端口任意一个不同）的web资源，并根据响应获得外部应用数据。比如我们用Ajax访问城市天气预报、IP地址等公共服务接口时，就涉及跨域了。我们请求一个外部服务时，浏览器会基于安全问题拒绝授权访问。而script、script、iframe标签的src属性就不存在跨域的问题，所以Ajax跨域就是利用这一点以及js对JSON的支持，外部服务只要给Ajax的请求响应一段JS代码或JSON数据，就能被Ajax获取到。
比如jquery的getScript
$.getScript(pv.sohu/cityjson,function(){前面加上 这个服务给响应的js代码为 returnCitySN = {cid: 110000, cip: 124.xxx.22.xxx, ame: 北京市} 回调函数执行前，外部服务给响应的js代码已被加载到本地，所以可以直接使用。 console.log(cid : + returnCitySN.cid); console.log(cip : + returnCitySN.cip); console.log(ame : + returnCitySName);});
问题六：为什么有人说ajax不能跨域是什么意思 不是可以通过ajax跨域访问吗 嗯，就是说啊，ajax只能在自己的域下访问，比如在腾讯里面写的AJAX 是不能去访问百度里面的东西的，这就是跨域的！使用AJAX是需要服务器环境的，目前只有火狐浏览器不需要搭建环境，即可直接使用AJAX操作！
问题七：什么叫做跨域访问，求大神解答 如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容
如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题
Ajax的跨域访问问题是现有的Ajax开发人员比较常遇到的问题
一般都会用jsoncallback方法来解决
你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的
希望能帮助到你
问题八：js中domain跨域是什么意思 你可以参考cors机制，还有p3p协议。具体什么内容和代码过程我忘了，如果你需要具体过程，请追问，我帮你查查书。
问题九：什么是JS跨域访问 ajax或者iframe指向的地址中，二级域名、端口、协议必须与主页面完全相同，否则就算跨域
比如
a.baidu访问b.baidu 是跨域；
a.baidu:8080访问a.baidu:80 是跨域；
a.baidu访问a.baidu 是跨域
ajax跨域，两种办法：后端写个代理接口，让后端去抓数据；或者与对方合作，用jsonp等方式传送数据
iframe跨域问题有点多，必须要得到iframe内部页面的配合才可能通信，方法也比较多：
1，假写hash值通信，父子页面各自建立轮询去检测iframe中url的hash值，通过值来通信
2，利用HTML5的postMessage，不过注意这个也是异步的
3，利用IE6\7中对navigator的bug，我前同事发现的，在ie6/7中，父子页面使用的window.navigator是同一个东西，父页面改了，子页面也会跟着变；
4，iframe中嵌套一层与顶层页面同域的页面，比如a中套b，b中套c，其中a、c同域，b做出改变后通过url给c传值，c中操作top对象也就是a，由于同域，所以不会有问题
问题十：javascript开发中jsonp跨域请求是什么意思？什么叫跨域？为什么用jsonp？ 跨域是JavaScript出于安全方面的考虑，不允许浏览器在当前访问的域名的页面中的javascript的调用其他域名页面中的对象。
跨域请求就是为了解决禁止跨域访问的问题。
用jsonp的原因是json是javascript中的对象，而跨域访问中有图片、css、javascript脚本文件等是不限制，因此你可以在页面渲染时动态在标签设置src路径，而这个路径返 *** 来的就是json对象。
开发笔记：iframe 内部如何实现跨域请求（解决方案）
在iframe中，是需要请求不同域名的数据，但实际情况，浏览器出于安全考虑，是不允许访问除 中的url的其他不同域名的数据。<br> <br> 我们可以借助 Nginx （需要与iframe请求的域名所在的Nginx), 配置一个代理地址，进行中间跳转，即可解决跨域问题。</p><H2 id="iframe跨域问题 嵌入别人网站不显示">iframe跨域问题 嵌入别人网站不显示</H2> <p>是需要登录到另一个系统，才可以看见的页面。如果只是跨域请求，则到此就可以实现功能了，不过如果你是需要登录到另一个系统，才可以看见的页面，那么还需要下面的步骤:因为如果是登录的话，那么一般来说，系统会将信息存储到session中，那么session会有一个JsessionId 存储在cookie中，所以，就出现了，虽然正常访问页面，正常登录，但是 就是没有权限访问里面的页面，会自动跳到登录页面。很奇怪，百思不得其解?看到页面其实是进去了，但是突然又弹出来，突然想到会不会是cookie没有跨域，导致里面的页面无法获取数据，认为是没有登录。最后经过尝试，果然是cookie需要设置跨域，才可以成功登录进去。</p><H2 id="前端iframe跨域问题分析">前端iframe跨域问题分析</H2> <p>前端开发中会用到iframe，页面之间互相调用方法，有时候可能出现无法调用的情况，控制台会报如上的错误： ?access to xmlhttprequest to "xx.xxx.xxx" from origin "xxx.xx.xxx" has been blocked by CORS policy ... 意思是请求被CORS策略阻止，此时就是发生了iframe跨域。</p><H2 id="iframe子页面在跨域情况下使用父页面的方法">iframe子页面在跨域情况下使用父页面的方法</H2> <p> 项目中，iframe内部的子页面要使用父页面的方法，如果不跨域，那么直接通过parent.func()就可以直接调用了。但如果子页面和父页面跨域了，就需要用html5的postMessage方法来进行通信和传输数据，间接性的在父页面调用方法。 以子页面向父页面通信为例： 子页面中<br> 父页面中这样接收<br> ie8兼容 1、绑定监听事件需兼容 由于ie8中不兼容addEventListener()这种事件监听方式，所以需要这样来绑定<br> 2、子页面向父页面传的数据为json字符串，即JSON.stringify后的字符串内容 需要用window.eval() 或 new Function(){} 的方式解析 JSON 格式字符串。</p></article> <div id="rel"> <h3 class="zit kico-sub">少长咸集</h3> <ul> <li class="log"> <a href="http://www./post/141575.html" title="查看《direction翻译,direction什么意思中文翻译》详情"> <img src="http://www./zb_users/theme/Zit/style/bg.jpg" alt="direction翻译,direction什么意思中文翻译" class="cover hue"> <span class="pane"> <em class="zit kico-prev">上一篇</em> <b>direction翻译,direction什么意思中文翻译</b> <span><small class="kico-time"><dfn>发表于</dfn>2024-04-27</small> <small class="kico-eye"><dfn>浏览</dfn>10</small> <small class="kico-ping"><dfn>评论</dfn>0</small></span> </span> </a> </li> <li class="log"> <a href="http://www./post/141574.html" title="查看《thinkphp6菜鸟教程,ThinkPHP的几种路由形式总结》详情"> <img src="http://www./zb_users/theme/Zit/style/bg.jpg" alt="thinkphp6菜鸟教程,ThinkPHP的几种路由形式总结" class="cover hue"> <span class="pane"> <em class="zit kico-next">下一篇</em> <b>thinkphp6菜鸟教程,ThinkPHP的几种路由形式总结</b> <span><small class="kico-time"><dfn>发表于</dfn>2024-04-27</small> <small class="kico-eye"><dfn>浏览</dfn>11</small> <small class="kico-ping"><dfn>评论</dfn>0</small></span> </span> </a> </li> </ul> </div> </main> <aside id="side"> <div class="pane hidem" id="divCatalog"> <h4 class="zit">网站分类</h4> <ul><li class="stock"><a href="http://www./category-2.html" class="kico-fold kico-gap">编程语言 <mark>141743</mark></a></li> <li class="stock"><a href="http://www./category-3.html" class="kico-fold kico-gap">硬件开发 <mark>79839</mark></a></li> <li class="stock"><a href="http://www./category-4.html" class="kico-fold kico-gap">前沿技术 <mark>140161</mark></a></li> <li class="stock"><a href="http://www./category-5.html" class="kico-fold kico-gap">资讯 <mark>76943</mark></a></li> </ul> </div><div class="pane hidem" id="divPrevious"> <h4 class="zit">最近发表</h4> <ul><li class="illus"><a href="http://www./post/441460.html" title="linux调用ping命令"><small>2025-04-16</small>linux调用ping命令</a></li> <li class="illus"><a href="http://www./post/441459.html" title="linux命令新增用户"><small>2025-04-16</small>linux命令新增用户</a></li> <li class="illus"><a href="http://www./post/441458.html" title="linux文件中乘号怎么打"><small>2025-04-16</small>linux文件中乘号怎么打</a></li> <li class="illus"><a href="http://www./post/441457.html" title="怎么查看linux容量"><small>2025-04-16</small>怎么查看linux容量</a></li> <li class="illus"><a href="http://www./post/441456.html" title="linux更改用户身份命令"><small>2025-04-16</small>linux更改用户身份命令</a></li> <li class="illus"><a href="http://www./post/441455.html" title="如何安装100台linux"><small>2025-04-16</small>如何安装100台linux</a></li> <li class="illus"><a href="http://www./post/441454.html" title="linux中ip配置怎么永久生效"><small>2025-04-16</small>linux中ip配置怎么永久生效</a></li> <li class="illus"><a href="http://www./post/441453.html" title="linux各个目录代表什么"><small>2025-04-16</small>linux各个目录代表什么</a></li> <li class="illus"><a href="http://www./post/441452.html" title="linux怎么看对外开放的端口"><small>2025-04-16</small>linux怎么看对外开放的端口</a></li> <li class="illus"><a href="http://www./post/441451.html" title="跟老男孩学linux运维命令行"><small>2025-04-16</small>跟老男孩学linux运维命令行</a></li> </ul> </div><div class="pane hidem" id="divComments"> <h4 class="zit">最新留言</h4> <ul></ul> </div></aside> </div> </section> <footer id="base"> <div class="inner"> <h4>© 2025 <a href="http://www./" class="zit">技术</a> Copyright Your WebSite.Some Rights Reserved.<br><a href="http://www.beian.miit.gov.cn" target="_blank">皖ICP备2023002134号</a></h4> <h5>Powered By <a href="//www.zblogcn.com" title="Z-BlogPHP 1.7.2" target="_blank">Z-Blog</a> Theme By <a href="//jgpy.cn" target="_blank" title="前端开发·自由设计">吉光片羽</a></h5> </div> </footer> <div id="ly_cache" data-id="141579" data-end="1747333267"></div></body> </html><!--61.29 ms , 12 queries , 2842kb memory , 0 error--><!--ly_cache 2025-04-16 02:21:07-->