您好,欢迎访问本站博客!登录后台查看权限
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 网站所有资源均来自网络,如有侵权请联系站长删除!
  • 了解seo技术,运营知识,营销策略,,MU MU ZHONG CHENG——沐目忠诚
  • 忠告:无论她(他)怎么对你,你都不能伤害她、她有她得难!

用iframe调用网页的某一块内容

网站建设 沐目忠诚 2012-12-16 595 次浏览 0个评论
网站分享代码

用iframe调用分两种方法,一种是调用自己可控的网页,另一种是调用不可控的网页。

如果是自己调用自己的,那我们直接用锚连接就可以。

具体方法:<iframe src=你的网址#锚点></iframe>

这样就可以了。在这其中可以设置自己的样式大小和宽度。

另一种是调用别人的网页,我们不可控,没办法加锚点,怎么办呢?我们用下面的方法。

<IFRAME vspace=300 hspace=”300″ src=”你的网址” frameBorder=0 scrolling=no wspace=”200″></IFRAME>

这里面的内容都是什么呢?

vspace是垂直方向移动;向上移动100像素格式是vspace=-100

hspace是水平方向移动;向左移动100像素格式是hspace=-100

width和marginWidth都是嵌入框架的宽度

height和marginheight都是嵌入框架的高度

scrolling是,是否显示下拉标识,”no”是隐藏,”yes”是显示

leftmargin是距离左端的距离

topmargin是距离上端的距离

js操作iframe的一些知识

1. 打印iframe eg. frameName.document.execCommand(‘print’);

2. 获取iframe eg. var ifr_window = window.frames["frameName"];

3. 获取iframe中的元素 eg1. 将iframe中id为elementId 的元素置为不显示: var ifr_window = window.frames["frameName"]; ifr_window.elementId.style.display = ‘none’; eg2. 获取iframe中id为listTable的表格 var oTable = window.frames["myFrame"].document.all.listTable;

4. 隐藏或显示表格的某列 js函数: function setHiddenOrShowCol(oTable, iCol, type) { for (i = 0; i < oTable.rows.length ; i++) { oTable.rows[i].cells[iCol].style.display = type; } }

调用举例,将id为listTable的表格元素的第4列置为不显示:

var oTable = window.frames["myFrame"].document.all.listTable; setHiddenOrShowCol(oTable, 3, ‘none’); 调用举例2,将id为listTable的表格元素的第4列置为显示: var oTable = document.frames.myFrame.document.all.listTable; setHiddenOrShowCol(oTable, 3, ‘block’);

JS部分是在网上看到的,还没试呢,我正在和同事商量用JS+CSS来空间,用iframe调用,看会不会更人性化,对浏览器的兼容性好点。有试过的也可以来分享分享啊。

 

实例仅兼容ie内核浏览器:<iframe vspace="-240" align="middle" src="http://jx.jxhld.gov.cn:8088/zhcx/web/car_jsp/car_wf.jsp" frameborder="no" scrolling="No" width="100%" gd0="gd0" height="809"></iframe>

兼容火狐谷歌浏览器

<div style="z-index:-100;position: relative;padding-top:0px;margin-top:-240px;overflow:hidden;">

<iframe frameborder="no" scrolling="No" width="100%" gd0="gd0" height="800" frameborder="0" marginheight="1" marginwidth="1" scrolling="yes" src="http://jx.jxhld.gov.cn:8088/zhcx/web/car_jsp/car_wf.jsp" style="padding-top:0px;"></iframe></div>

整块显示内容无法操作

下面这个实例可以解决问题:

<div style="z-index:-9;position:relative; relative;padding-top:0px;margin-top:-240px;overflow:hidden;">

<iframe frameborder="no" scrolling="No" width="100%" gd0="gd0" height="800" frameborder="0" marginheight="1" marginwidth="1" scrolling="yes" src="http://jx.jxhld.gov.cn:8088/zhcx/web/car_jsp/car_wf.jsp" style="padding-top:0px;"></iframe></div>

如果出现还浮于上层可以将style="z-index:-9; 改为style="z-index:9999;

随便普及一下div控制层的知识:

 

网站常会用到一些 下拉菜单,,幻灯片,,,飘浮广告等。

但经常会发现。幻灯片会挡住下拉菜单或者飘浮广告等。解决办法有下

第一,可将幻灯片所在DIV 置于最底层。添加CSS如下

style="z-index:-100;position: relative;"

第二,可将被挡住的DIV/ul/li 置于最高层。添加CSS如下

style="z-index:9999;position: relative;"

 

在使用FLASH幻灯的时候,有时还是不行。那便在FLASH代码中添加此行代码。

<param name="wmode" value="opaque">

例如:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="980" height="290" style="z-index:-100;position: relative;">

<param name="movie" value="<?php echo get_skin_root() ?>indexflash/main.swf" style="z-index:-100;position: relative; />

<param name="quality" value="high" />

<param name="wmode" value="opaque">

<embed src="<?php echo get_skin_root() ?>indexflash/main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="980" height="290"></embed>

</object>

文章由:铜鼓人论坛地址:演示地址http://www.tgtan.com/plugin.php?id=tgtan_weizhang:tgtan_weizhang

 

已有 595 位网友参与,快来吐槽:

发表评论