`
fireinjava
  • 浏览: 480136 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

在顶层iframe页面添加图片div

    博客分类:
  • Java
JSP 
阅读更多

又解决了一个问题...之前想太复杂了...

 

父页面http://localhost:8080/parent/index.jsp
子页面http://localhost:8081/child1/day.jsp

子页面通过iframe嵌入到父页面,然后子页面里面要在父页面上生成一个div,
div.innerHTML = '<img src="<%=request.getContextPath()%>/images/loading.gif" />'

出来后变成http://localhost:8080/child1/images/loading.gif (因生成到父页面,故IP及端口自然变成成父页面的了)
而正常的要http://localhost:8081/child1/images/loading.gif

 

解决方法:直接在子页面把图片的完整路径带过去。

代码如下:

function createTopDivIfNotExist(){
	var topDoc = top.document;
	var chartDiv = topDoc.getElementById('topDiv');
	if(chartDiv == null || typeof(chartDiv) == 'undefined'){
		var chartDiv = topDoc.createElement('div');
	    topDoc.body.appendChild(chartDiv);  
	    chartDiv.id = 'topDiv';
	    chartDiv.innerHTML = '<img src="<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/"%>images/kpiUp.jpg" />';
	    //chartDiv.innerHTML = '<img src="<%=request.getContextPath()%>/images/kpiUp.jpg" />';//错误的
	    chartDiv.onmouseover = function(){topDoc.getElementById('topDiv').style.display='block';};
	    chartDiv.onmouseout = function(){topDoc.getElementById('topDiv').style.display='none';};
	    with(chartDiv.style) {
		     position = 'absolute';
		     background = '#F5F5F5';
		     width = '330';
		     height = '250';
		     top = 300;
		     left = 300;
		     display = 'block';
		     style ='position:absolute;background-color:#F5F5F5';
	     }
	}
}

 

2
2
分享到:
评论

相关推荐

    拖拽一个iframe中的div 在另一个iframe页面中显示

    标题 "拖拽一个iframe中的div 在另一个iframe页面中显示" 描述了在Web开发中一个交互性的技术,涉及跨框架(iframe)通信和DOM操作。这个技术主要应用于创建富交互的用户界面,允许用户在不同的iframe之间传递和操作...

    多个iframe,其中一个的div能够处于最上层显示

    在网页设计中,`iframe` 是一种非常有用的元素,它允许我们在一个页面中嵌入另一个网页。当有多个 `iframe` 并存时,可能会出现重叠或者层级问题,特别是当其中某个 `iframe` 中有一个需要突出显示的 `div` 元素时。...

    iframe弹出框遮罩父类页面

    2. **遮罩层**:为了实现遮罩效果,我们需要在子页面中添加一个全屏的透明div,作为遮罩层。这个div通常设置为全屏尺寸,并设置较低的不透明度,以达到半透明的效果。同时,它的初始样式也需要设置为隐藏。 3. **...

    js如何设置在iframe框架中指定div不显示

    如果两者相等,说明页面不是在`iframe`内加载,此时`div`元素(id为`top`)会显示;反之,如果`window.top`不等于`window.self`,则表示页面在`iframe`中,`div`将被隐藏。 ```html 测试 function getStyle()...

    jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)

    本文将深入探讨如何利用EasyUI的Window插件在Layout框架页面中实现弹出窗体到最顶层的效果,尤其是当窗体需要穿越iframe时。 首先,我们需要理解jQuery EasyUI的Window组件。Window是EasyUI中的一个动态弹出窗口,...

    在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)

    在Web开发中,有时我们需要在嵌入的`iframe`中操作父窗口的元素,例如在本例中,我们需要在`iframe`内的页面通过JavaScript实现一个动画效果,让父窗口上的某个`div`元素能够展开和收缩,而不需要修改父窗口的代码。...

    ie6下select遮挡div

    1. 使用jQuery bgiframe插件:该插件创建一个透明的iframe层,将被遮挡的div覆盖在select之上,从而避免遮挡问题。 2. 避免使用绝对或相对定位:改用其他布局方式,如使用浮动(float)或Flexbox(对于现代浏览器)...

    ie6下select覆盖div的解决办法

    在IE6中,Select元素具有“下拉菜单”的特性,它会被渲染在页面的最顶层,即使它在HTML结构中位于其他元素(如Div)之下。这种行为是由于IE6对CSS层叠上下文理解的局限性,以及对z-index属性的不完全支持导致的。 ...

    自定义jquery模态窗口插件无法在顶层窗口显示问题

    首先,我们需要了解模态窗口(Modal Window)是一种常用的用户界面元素,它允许用户在页面的主内容之上显示一个新的弹出层。这种弹出层通常用于展示额外信息、提示消息、表单输入等,且会阻塞背景页面的其他交互直到...

    浅析js实现网页截图的两种方式

    3. **样式转换**:遍历渲染队列,将CSS样式转换为Canvas API可识别的参数,例如,将文本样式转换为`setFillStyle`,调用`fillText`绘制文本,调用`drawImage`绘制图片,对于设置了背景色的div使用`fillRect`等。...

    jquery刷新页面和JS常用的函数

    当页面嵌套在多个 `iframe` 中时,`top.location.reload()` 可用于刷新最外层的页面。 **刷新弹出窗口:** ```javascript opener.location.reload(); ``` 如果页面是通过 `window.open()` 打开的新窗口,则可以...

    mvc常用的跳转

    这种方式适用于嵌套在`iframe`中的页面。当需要更新`iframe`中的内容时,可以通过调用`parent.location.reload()`来实现整个父页面的刷新,从而间接地刷新`iframe`内部的内容。 #### 2. 关闭弹出对话框并刷新页面 `...

    js 控制页面跳转的5种方法

    然后,在标签中加入onload事件,使Load()函数在页面加载完成时被调用,同时页面中需要一个用于显示倒计时信息的&lt;div&gt;元素。 ```html ('index.asp')"&gt; &lt;div id="ShowDiv"&gt;&lt;/div&gt; ``` 第二种方法是通过一个简单的...

    关于flash遮盖div浮动层的解决方法

    通过将Flash嵌入脚本放入一个Div容器中,我们可以更好地控制其在页面中的位置和层级关系。例如: ```javascript var so = new SWFObject("XXX.swf", "flashId", "宽度", "高度", "版本", "背景色"); // 设置Flash...

    在浏览器窗口上添加遮罩层的方法

    这个`div`通常放置在页面的最顶层,用于覆盖页面的所有内容。 ```html &lt;div unselectable="on" style="background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;height:100%;width...

    一个刚完成的layout(拖动流畅,不受iframe影响)

    2. **使用`z-index`层级控制**:通过调整元素的`z-index`值来确保拖动条始终位于最顶层,即使在`iframe`之上。 3. **禁用`iframe`内的鼠标事件**:通过JavaScript监听`iframe`的鼠标事件,并阻止它们向父级元素传播...

    左右分栏特效代码下载

    这行代码的作用是防止在框架内打开新窗口时出现重复的导航栏,确保用户总是在最顶层的窗口中操作。 #### 2. `function switchSysBar()` 这个函数用于切换左侧栏的显示与隐藏。通过改变`switchPoint.innerText`的值...

    jQuery弹出层插件popShow(改进版)用法示例

    同时,为了确保弹出层能够正确地显示在页面上,还定义了z-index属性,使其始终处于顶层。 总的来说,popShow插件(改进版)通过简单的API和强大的内部实现,为Web开发人员提供了一种简便的方式来快速添加和管理弹出...

Global site tag (gtag.js) - Google Analytics