用iframe加载http远程资源

最新推荐文章于 2024-05-30 15:14:05 发布

原创最新推荐文章于 2024-05-30 15:14:05 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

http 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在JS中控制Iframe中的HTML内容尺寸，并解决本地请求路径下的跨域问题，通过实例展示了跨域请求的配置及对Iframe内容尺寸的动态调整。

jsp中的iframe：

<iframe src="/mobile/parents/remote/$!{ency.contentUrl}index.html" id="ifr" align="center" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

js对iframe的控制

$('#ifr').load(function(){
		
		/*var $head = $(this).contents().find('head');
		$head.append("<link rel='stylesheet' href='../../../../themes/mobile/parents/content.css' />");*/
		var width = $('#detail-article').width();
		$(this).contents().find('img,iframe').each(function(){
			if($(this).width() >=width ) {
				$(this).width(width-10);
			}
		});
		
		var mainheight = $(this).contents().find('body').height()+30;
		$(this).height(mainheight);
	});

上面的iframe中src配置的还是本地的请求路径，非远程的路径，不存在跨域的问题，参考：

http://felix-alone2012.iteye.com/admin/blogs/2181789

js中对iframe中html内容的尺寸进行了控制