在顶层iframe页面添加图片div

最新推荐文章于 2022-12-16 16:39:58 发布

最新推荐文章于 2022-12-16 16:39:58 发布 · 1.8k 阅读

文章标签：

#JSP

java 专栏收录该内容

29 篇文章

订阅专栏

本文讨论了如何在父页面中通过iframe嵌入子页面，并在子页面上生成div元素，解决跨域问题的方法。

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

父页面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';
	     }
	}
}