近期开发的一个项目中需要开发如下一个功能: 需要检测一个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(Inline Frame)环境中,Session的管理变得复杂,因为IFrame本质上是一个嵌入到主页面中的子窗口或框架,它可以加载来自不同源的网页。这种结构可能导致Session信息在IFrame与其父窗口或同一页面中的...
在本文中,我们将深入探讨如何使用JavaScript实现一个可拖动的iframe。JavaScript是一种强大的客户端脚本语言,常用于网页交互和动态效果的实现。在这个案例中,我们将关注于利用JavaScript来增强iframe的功能,使其...
父页面每隔一定时间检测`iframe`的`contentDocument`或`contentWindow`,若可用则获取高度,设置`iframe`高度。这种方法可能因为同源策略而失败,但在某些情况下仍能工作。 - **使用`padding-bottom`技巧** 子...
这段代码的作用是当页面加载时,对于每个`<iframe>`元素都会触发`v:expression`中的JavaScript代码,该代码首先将`<iframe>`的`src`属性设为`about:blank`,使其显示为空白页面;然后进一步将其外层HTML设为空字符串...
`src`属性定义了要嵌入的页面地址,`width`和`height`分别定义了Iframe的宽度和高度,`frameborder`用来设置边框是否显示。 在实际应用中,我们通常希望Iframe的高度能够根据嵌入内容的长度自动调整。这里有两个...
这段代码首先获取`iframe`元素,然后检查其`contentWindow`和`contentWindow.document`是否可用,如果可用,就设置`iframe`的高度为子页面`document.body.scrollHeight`,这样`iframe`就会根据子页面的实际内容高度...
5. **服务器端数据推送**:当服务器端有新数据可用时,通过PHPComet接口将数据发送到与IFrame相关的连接。这样,即使用户在浏览其他部分的网站,IFrame中的内容也会实时更新。 6. **优化与调试**:根据应用需求,...
### 自动改变iframe的高度 在Web开发中,`iframe`是一种常用的技术,...总之,`iframe`自动改变高度是一项实用且重要的技术,对于提升网站的可用性和维护性有着不可忽视的作用。希望本文能为你提供有用的参考和启发。
在IE6浏览器中,开发人员可能会遇到一个特定的问题:使用`innerHTML`属性向DOM元素动态添加包含`iframe`标签的HTML代码时,`iframe`的`src`属性内容不显示。这个问题是由于IE6的一个已知兼容性问题,具体表现为`...
在父容器上设置相应的样式,可以让Iframe自动填充可用空间。例如,使用Flexbox: ```html ;"> <iframe id="myIframe" src="http://example.com" style="flex: 1;"></iframe> ``` 3. **PostMessage API**: ...
在IT行业中,弹出窗口是一种常见的用户界面设计技术,它用于显示额外的信息或者进行特定的操作。"背景固定"和"iframe"是实现弹出窗口功能时可能会涉及到的关键概念。接下来,我们将深入探讨这两个主题以及它们如何...
在实际应用中,Iframe也有一些限制,比如跨域安全策略可能会影响内容的加载和访问,而且对于搜索引擎优化(SEO)不太友好,因为搜索引擎可能无法正确抓取嵌入的内容。然而,通过合理使用和设置,Iframe仍然是构建...
2. **条件检查**:首先检查`document.getElementById`是否存在,确保DOM操作可用;然后检查当前`iframe`是否有效且浏览器不是Opera,这是因为Opera的处理机制与其它浏览器有所不同。 3. **高度获取与设置**:通过`...
总的来说,JS实现向iframe中表单传值是通过获取iframe的`contentWindow`属性,然后操作iframe内页面的DOM元素,将数据传递到隐藏的表单字段,最后提交表单来完成的。这种方法在多页面交互和数据传递中有广泛的应用。...
例如,可以将iframe放入一个`.col`类的div中,然后使用jQuery UI的拖放功能调整其在页面上的位置。 6. **响应式设计**:考虑到移动设备的使用,要确保在不同屏幕尺寸下iframe仍能正常工作。Bootstrap的栅格系统支持...
`,然后将`iframe`的`flex-grow`属性设置为1,这样`iframe`会占据所有可用空间。 ```css .parent-container { display: flex; } iframe { flex-grow: 1; } ``` 这样,`iframe`就会根据其内容自动扩展高度。...
在前端开发中,有时我们需要在页面中嵌入`iframe`元素来加载外部资源或实现页面分片。然而,`iframe`的默认行为可能导致内容溢出,用户体验不佳。本项目"前端项目-set-iframe-height"专注于解决这个问题,通过跨域...
实现这种功能通常涉及JavaScript,可能是通过添加一个“关闭”按钮,并设置一个事件监听器来处理点击事件,然后修改`iframe`的`display`样式属性,将其设为`none`,从而达到隐藏的效果。 `使用须知.txt`可能包含了...
"jquery.benma.tab"这个压缩包文件可能包含了一个名为"benma"的开发者编写的jQuery选项卡插件,特别地,它支持将内容嵌入到iFrame中,这样可以在选项卡之间加载不同的页面或内容。 ### jQuery选项卡基础 jQuery...
本文将详细介绍如何使用JavaScript(JS)来修改`iframe`页面的背景颜色。 首先,`iframe`是HTML的一个元素,它允许我们在一个页面中嵌入另一个HTML文档。`iframe`的基本结构如下: ```html <iframe id="myframe" ...