学会iframe并用其解决跨域问题
Posted M78_国产007
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学会iframe并用其解决跨域问题相关的知识，希望对你有一定的参考价值。
了解iframe
官方定义为：iframe是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架）。
简单理解为：iframe是一个内联框架，可以在当前html页面中嵌入另一个文档。
iframe的属性
这里只介绍常用属性
name:规定 <iframe> 的名称。
width:规定 <iframe> 的宽度。
height:规定 <iframe> 的高度。
src:规定在 <iframe> 中显示的文档的 URL。
frameborder:HTML5 不支持。规定是否显示 <iframe> 周围的边框。属性值为1或者0，1代表有边框，0代表无边框。
scrolling:HTML5 不支持。规定是否在 <iframe> 中显示滚动条。属性值为yes、no、auto。
align:HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 <iframe>。属性值有left、right、middle、top、bottom
简单演示：
<h1>演示iframe的使用</h1>
<iframe src="http://www.bilibili.com" name="ifr" frameborder="1" height="400" width="600" scrolling="no">你的浏览器不支持该iframe标签</iframe>我们设置了一个名为ifr，宽为600，高为400，显示边框，隐藏滑动条，显示文档为b站（也可以选择本地html文档）的内联框架。 我们可以在iframe标签中写上文字说明，因为有一些低版本浏览器不支持这个标签，显示不了文档的时候就会在页面显示我们写的文字。
打开浏览器看下效果：
获取iframe内的内容
<h1>演示iframe的使用</h1>
<iframe src="./t1.html" id="myiframe">你的浏览器不支持该iframe标签</iframe>
<script>
//获取iframe标签
var myiframe=document.querySelector("#myiframe")
//获取它的window对象
var mywindow=myiframe.contentWindow
//获取它的document对象
var mydocument=mywindow.document
</script>解决跨域问题
1、document.domain+iframe
这个方法只能用于同一个主域下不同子域之间的跨域请求，比如a.com和1.a.com 之间，1.a.com和2.a.com 之间。
只要把两个页面的document.domian都指向主域就可以了，比如document.domain="a.com"。
父页面通过iframe嵌入子页面，通过iframe.contentWindow获取子页面的window,即可操作子页面，子页面通过parent.window和parent来访问父页面的window。
写个例子：
//父页面http://a.com/a.html
<iframe id="myiframe" src="http://1.a.com"></iframe>
<script>
document.domain="a.com"
var myiframe=document.queryselector("#myiframe")
var name1=1
//获取子页面的属性
var name22 = myiframe.contentWindow.name2;
</script>//子页面 http://1.a.com/b.html
document.domain="a.com"
var name2=2
//获取父页面的属性
var name11=parent.window.name12、window.name+iframe
实现是基于window.name传递数据。name 在浏览器环境中是一个全局window对象的属性
当在 iframe 中加载新页面时，name 的属性值依旧保持不变。
跨域 iframe 调整大小？
【中文标题】跨域 iframe 调整大小？【英文标题】：cross-domain iframe resizer? 【发布时间】：2011-08-02 04:35:00 【问题描述】：我正在寻找一个很好的跨域 iframe 大小调整脚本，它可以根据其内容调整其高度。我也可以访问 iframe 源的 html/css。有吗？
【问题讨论】：
查看这个简单的解决方案：***.com/questions/7024574/… 是我还是所有这些答案都要求您将脚本添加到 external 页面？ 【参考方案1】：如果您的用户使用现代浏览器，您可以使用postMessage in HTML5 轻松解决此问题。这是一个效果很好的快速解决方案：
iframe 页面：
<!DOCTYPE html>
<head>
</head>
<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');">
<h3>Got post?</h3>
<p>Lots of stuff here which will be inside the iframe.</p>
</body>
</html>
包含 iframe 的父页面（并且想知道它的高度）：
<script type="text/javascript">
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);
</script>
<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');">
</iframe>
【讨论】：
它对我有用；唯一的缺点是远程 iFramed 站点也需要编辑，如果不可编辑，这将不起作用 在 Chrome（版本 56.0.2924.87）中尝试过，但没有成功。不会出现任何错误，但也不会调整大小。【参考方案2】：由于未能找到处理所有不同用例的解决方案，我最终编写了一个简单的 js 库，它支持宽度和高度、调整内容大小和一个页面上的多个 iframe。
https://github.com/davidjbradshaw/iframe-resizer
【讨论】：
这个库非常令人印象深刻，似乎解决了我在其他解决方案中遇到的所有其他问题。谢谢你的工作。【参考方案3】：我有一个完全不同的跨域 iframe 调整大小的解决方案。它涉及获取您将放入 iframe 的目标页面的副本，将其写入本地，然后将该副本放入您的 iframe 并根据对框架内 dom 的相同域访问调整大小。
一个例子如下：
<?php
if(isset($_GET['html'])) $blogpagehtml = file_get_contents(urldecode($_GET['html']));
else $blogpagehtml = file_get_contents('http://r****d.wordpress.com/');
$doc = new DOMDocument();
libxml_use_internal_errors(true);
$doc->loadHTML($blogpagehtml);
libxml_use_internal_errors(false);
$anchors = $doc->getElementsByTagName("a");
foreach($anchors as $anchor)
$anchorlink=$anchor->getAttribute("href");
if(strpos($anchorlink,"http://r****d.wordpress")===false) $anchor->setAttribute("target","_top");
else $anchor->setAttribute("href","formatimportedblog.php?html=".urlencode($anchorlink));
$newblogpagehtml = $doc->saveHTML();
$token = rand(0,50);
file_put_contents('tempblog'.$token.'.html',$newblogpagehtml);
?>
<iframe id='iframe1' style='width:970px;margin:0 auto;' src='tempblog<?php echo $token; ?>.html' frameborder="0" scrolling="no" onLoad="autoResize('iframe1');" ></iframe>
【讨论】：
【参考方案4】：此页面上的第一个脚本 - 在 HTML5 中使用 postMessage 的脚本 - 也适用于移动设备上的 iframe - 通过将 iframe 调整为内容的大小 - 例如跨域联合 - 您可以轻松地在 iphone 或 android 中滚动否则 iframe 无法做到这一点
【讨论】：
【参考方案5】：以下代码对我有用：
var iframe = document.getElementById(id);
iframe.height = iframe.contentDocument.body.scrollHeight;
在 Opera 11、IE 8 9、FF 8、Chrome 16 上测试
【讨论】：
这仅在 iframe src 与父级位于同一域中时才有效。【参考方案6】：经过一番研究，我最终使用了 html5 的消息传递机制，该机制包含在 jQuery pluging 中，这使得它可以使用各种方法（其中一些在此线程中描述）与旧版浏览器兼容。
最终的解决方案很简单。
在主机（父）页面上：
// executes when a message is received from the iframe, to adjust
// the iframe's height
$.receiveMessage(
function( event )
$( 'my_iframe' ).css(
height: event.data
);
);
// Please note this function could also verify event.origin and other security-related checks.
在 iframe 页面上：
$(function()
// Sends a message to the parent window to tell it the height of the
// iframe's body
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
$.postMessage(
$('body').outerHeight( true ) + 'px',
'*',
target
);
);
我已经在 XP 和 W7 上的 Chrome 13+、Firefox 3.6+、IE7、8 和 9 以及 OSX 和 W7 上的 safari 上进行了测试。 ;)
【讨论】：
【参考方案7】：EasyXDM 可以做到这一点:) This blog post 解释了它的要点
【讨论】：
我刚看了看，似乎超出了我的专业范围。 请参阅 easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content 以获得解释 - 真的没有更简单的方法。以上是关于学会iframe并用其解决跨域问题的主要内容，如果未能解决你的问题，请参考以下文章