如果你想在自己的网页上引用并显示别人的网页,那么iframe是一个很好的选择。如果你的网站和将要引用的网站在同一个域名下那么可以通过js很方便的操作iframe中的DOM对象。但是如果两者不在相同的域名下那么就要涉及到跨域访问的问题了。本人有一些小的方法在这里就和大家分享一下。
如下图:如果自己的网页想要访问iframe1的DOM对象就会产生跨域访问的问题。所以我们就要引入第三个页面,而这第三个页面则就是iframe2,iframe2中的页面与iframe1中的页面在相同域名下,所以在middle.jsp页面的js中通过parent.windows.iframe1就可以直接访问iframe1中的DOM对象
//middle的代码
//parent.window.iframe1中的iframe1是<iframe name="iframe1">的name属性的值
//parent.window.iframe1就是iframe1这个对象。
<script type="text/javascript">
parent.window.iframe1.$("#sidebar").hide();
parent.window.iframe1.$("#header").hide();
parent.window.iframe1.$("#main-content").css("marginLeft",0);
var aclick=parent.window.myframe.$("#sidebar a");
</script>
//localhost:8080/index.jsp的代码片段
<div style="float:left;width: 80%" id="des">
<iframe id="ifr" name="myframe" width="100%" height="100%" style="float:left;" frameborder="0" src="http://127.0.0.1:8080/Shanwy/main/home/1?current_project=1&access_token=0eb77c7c456d001a12aad2d74eeef433" >
</iframe>
</div>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
document.getElementById('ifr').οnlοad=function(){
//当iframe加载完成后创建一个iframe2
createframe();
};
function createframe(href)
{
//创建一个iframe
$(document).find("iframe[name='tmp_frame']").remove();
exec_obj = document.createElement('iframe');
exec_obj.name = 'tmp_frame';
exec_obj.src = "http://127.0.0.1:8080/Shanwy/iframemiddle.jsp?href="+href;
exec_obj.style.display = 'none';
document.body.appendChild(exec_obj);
}
这就是解决iframe跨域问题的基本思路,通过在iframe1的域下增加一个页面的方法间接的对iframe1进行操作就解决了跨域问题。如果想通过自己的页面向iframe传值,那么可以通过在url后拼接参数的形式访问middle.jsp ,然后通过location.href在middle.jsp页面获取整个url并截取参数,这样就实现了跨域的简单传值。
该方法是本人总结并改进前人的方法总结所得,本人菜鸟一枚,如有写的不完善或者错误的地方还望指教,大家互相学习共同进步。