当前位置:首页 > 心得日志 > 正文
作者

在网站中利用iframe调用某一区域的网页

扫描二维码分享到朋友圈

在做网站时,我们偶尔可能需要调用别的网站某一块区域的内容,例如:股票行情啊,天气情况了等等。而这时就需要用到iframe调用。

调用的方法其实很简单,只需要用一个div内加一个iframe即可。例如我们需要调用我的博客中右边栏云推荐中的内容,那么就可以用以下代码:

<div style=” height:480px; width:260px; overflow:hidden;”>
<iframe scrolling=”no” style=”height:1200px; margin-top:-472px; width:1000px; margin-left:-733px;”

src=”http://www.wooaii.com/”></iframe>
</div>

我来解释一下代码,外部的div就不说了。div中的height和width的大小是显示你要显示的内容的宽度和高度。而iframe里的大小是需要框架加载的大小。一定要比div的大小大一些。不然显示不全。另外就是iframe的定位问题了,也就是margin-top和margin-left.这两个参数。这个在网上找了一下发现都没有解释是怎么定位的,这里我着重讲一下。其实定位很简单。如我的网站是居中显示的。所以位置(0,0)就是左上角了。我们用QQ截图工具选中从左上角选中网站,向右下拉动,其实就相当于我们学过的坐标第四象限。如果你试着调整margin-left和margin-top你会发现往右与往下都是负数。

那么我们就可以这样子调用了。用QQ截图工具从顶部向下拉动到要截取的区域顶部,记下这个数字为472.其实这个就是margin-top的值。只不过要加个负号。而由左边向右拖动到要截取区域最左边就是margin-left的值了。也要加个负号。然后查看你要截取的区域的宽度和高度,埴到div的width和height中即可。

src即是你要截取的网页。是不是十分方便呢。我们看一下效果。由于各种浏览器有时定位不同,需要细调。



1,217 条评论

  1. 5楼2017-01-15 上午 9:04回复
    jacksonville financing

    Muchos Gracias for your blog article.Really looking forward to read more. Really Great.

  2. 4楼2017-01-24 上午 12:25回复
    in wall speakers

    I truly appreciate this article post.Much thanks again.

  3. 地板2017-01-24 上午 4:21回复
    phim nguoi lon online

    Thanks again for the post.Thanks Again. Awesome.

  4. 板凳2017-01-24 上午 8:20回复
    exchange email servers

    I appreciate you sharing this blog.Much thanks again. Want more.

  5. 沙发2017-01-24 下午 12:14回复
    lollipop

    I really like and appreciate your blog article. Will read on…

发表评论


无觅相关文章插件,快速提升流量