如何检测IFRAME中SRC是否可用,不可用将IFRAME隐藏

本文介绍了一种通过AJAX检测iframe源是否可用的方法,并解决了跨域访问的问题。具体包括使用Base64加密URL参数,通过servlet处理跨域请求等步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

近期开发的一个项目中需要开发如下一个功能: 需要检测一个iframe中的src是否可用如果不可用则将该iframe隐藏. 我采用的方法是通过ajax去检测,如果不可用才将该iframe隐藏,代码如下:  
<script language="javascript"> 
var isExistPage = true; 
var pageUrl = document.getElementById('frame1').src; //页面地址 
var XmlHttp= null; 
if(window.XMLHttpRequest){ 
XmlHttp= new XMLHttpRequest(); 
}else if(window.ActiveXObject){ 
XmlHttp= new ActiveXObject("Microsoft.XMLHTTP"); 

try{ 
XmlHttp.open("GET",pageUrl,false); 
XmlHttp.send(); 
if(XmlHttp.status==200){ 
isExistPage = true; 
}else{ 
isExistPage = false; } } 
catch(error){ 
isExistPage = false; 
} if(isExistPage==false){ 
document.all.frame1.style.display="none"; 

</script> 
其中frame1是iframe的id 
使用上述程序你可能会遇到如下问题:

1.页面会报js错误拒绝访问在XmlHttp.open("GET",pageUrl,false);

具体原因如下:ajax是不能够跨域访问的,如果你的iframe的地址与本服务器上的域不一致的话就会导致这种情况.

具体解决办法就是将该地址作为参数传到servlet或者是jsp中进行处理并将处理结果返回给页面.

具体代码修改如下:

<script language="javascript"> 
var isExistPage = true; 
var urlValue = Base64.encode(document.getElementById('frame<c:out value="${aCom.comForm.com_id}"/>').src);//加密该iframe的地址
var pageUrl = "/cetv/kkk.weather?url="+urlValue; //页面地址 
var XmlHttp= null; 
if(window.XMLHttpRequest){ 
      XmlHttp= new XMLHttpRequest(); 
} else if(window.ActiveXObject){ 
      XmlHttp= new ActiveXObject("Microsoft.XMLHTTP"); 
  }
      XmlHttp.open("GET",pageUrl,false);
      try{ 
      XmlHttp.send(); 
      if(XmlHttp.status==200){ 
       var str=XmlHttp.responseText;
        if(str==200)
          {
            isExistPage = true;
          }else{
                      isExistPage = false;
                   }
      }else{ 
      isExistPage = false; 
      } 
      }catch(error){ 
      isExistPage = false; 
      } 
      if(isExistPage==false){
       document.all.div<c:out value="${aCom.comForm.com_id}"/>.style.display="none";
       }

</script>

 servlet中进行处理的代码:

int responseStatus=-1;
     String getUrl = request.getParameter("url");
     getUrl = Base64Util.base64_decode(getUrl);
     if(getUrl.startsWith("/cetv")){
      responseStatus = 200;
     }else{
      HttpClient httpClient = new HttpClient(); 
      responseStatus = getServerResponseStatus(getUrl,httpClient);
     }
     System.out.println("responseStatus="+responseStatus);
  if(responseStatus == 200)
  {
   System.out.println("该url合法!");
  }
  response.getWriter().println(responseStatus);

这种方式的思路就是通过将跨域地址的ajax请求放在servlet中进行处理并将请求结果responseStatus过 response.getWriter().println(responseStatus);传到页面这样的话页面就可以通过XmlHttp.responseText;

取得这个值.

2.那么为什么要对页面中的url参数进行加密呢,原因就是url本身可以带很多个参数,如果不加密的话url自带的参数就会在servlet中request.getParameter("url");请求中消失,可以将url整体进行加密然后传过来已后再进行解密

### 关于 iframe 示例地址或可用网址 iframe 是一种非常实用的技术,允许在一个网页中嵌入另一个网页。以下是一些常用的示例地址和场景: #### 基本语法 以下是 iframe 的基本用法: ```html <iframe src="https://www.example.com" width="600" height="400"></iframe> ``` 上述代码会加载 `https://www.example.com` 并将其嵌套在当前页面中[^1]。 #### 实际应用中的常用网站 - **Google Maps**: 使用 Google 地图作为 iframe 来源是一个常见案例。 ```html <iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> ``` 这种方式常用于展示地理位置信息。 - **YouTube 视频播放器**: ```html <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ``` YouTube 提供了专门的嵌入链接功能,可以直接复制并粘贴到 iframe 中使用。 - **CodePen 和 JSFiddle**: 这两个平台提供了在线编辑和预览的功能,非常适合用来测试和演示 iframe 效果。 ```html <!-- CodePen --> <iframe height="300" style="width: 100%;" scrolling="no" title="Example Pen" src="https://codepen.io/username/embed/pencilID" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> </iframe> <!-- JSFiddle --> <iframe width="100%" height="300" src="//jsfiddle.net/user/fiddleID/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> ``` #### 跨域通信解决方案 当涉及跨域 iframe 时,可以利用 HTML5 的 `postMessage` API 完成父子页面之间的数据交换[^2]。例如,在父页面向子 iframe 发送消息: ```javascript // 父页面发送消息给 iframe 子页面 var iframe = document.getElementById('myIframe'); iframe.contentWindow.postMessage({ key: 'value' }, '*'); // '*' 表示目标窗口的 URL 限 ``` 而在 iframe 子页面接收消息: ```javascript window.addEventListener('message', function(event) { console.log('接收到的消息:', event.data); }); ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值