社区
JavaScript
帖子详情
页面中有一个iframe,如何知道该iframe相对屏幕左上角的坐标位置?
chenbanghong
2003-02-27 09:06:30
页面中有一个iframe,如何知道该iframe相对屏幕左上角的坐标位置?
我们知道可以先求iframe相对“页面”(不是“IE窗口”,注意页面和IE窗口的区别!!!)左上角的坐标位置,再加上“IE窗口”相对屏幕左上角的坐标位置,然后将两组值相加,但是这样得到的值是不正确的,因为没有考虑“IE窗口”菜单,地址栏,工具栏的高度。不知道这个如何处理,请赐教!!!
...全文
820
6
打赏
收藏
页面中有一个iframe,如何知道该iframe相对屏幕左上角的坐标位置?
页面中有一个iframe,如何知道该iframe相对屏幕左上角的坐标位置? 我们知道可以先求iframe相对“页面”(不是“IE窗口”,注意页面和IE窗口的区别!!!)左上角的坐标位置,再加上“IE窗口”相对屏幕左上角的坐标位置,然后将两组值相加,但是这样得到的值是不正确的,因为没有考虑“IE窗口”菜单,地址栏,工具栏的高度。不知道这个如何处理,请赐教!!!
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
6 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
meizz
2003-02-28
打赏
举报
回复
再次申明: 下面这段代码一定要放在被iframe包含的网页里
<body><SCRIPT LANGUAGE="JavaScript">
var s = "网页离屏幕左顶点高:"+ window.screenTop;
s += "\r\n网页离屏幕左顶点宽:"+ window.screenLeft;
alert(s);
</SCRIPT>
这个得到的值再加上iframe的border的值是准确的,
你可以用截屏的方法,具体量一量就知道了.
chenbanghong
2003-02-28
打赏
举报
回复
meizz(梅花雨) and fason(阿信) 得到的都是iframe所在IE窗口的左上角到屏幕左上角的距离,而不是我所需要iframe的左上角到屏幕左上角的距离。
wsj(骆驼) 的结果比较接近,但是没有注意到IE的Title Bar,地址栏,工具栏以及菜单栏的高度:(
wsj
2003-02-27
打赏
举报
回复
<iframe id=test1 src="1.htm"></iframe>
<script>
alert("Top:"+(window.screenTop+document.all.test1.offsetTop));
</script>
fason
2003-02-27
打赏
举报
回复
网页离屏幕左顶点高:window.screenTop;
网页离屏幕左顶点宽:window.screenLeft;
wsj
2003-02-27
打赏
举报
回复
:)
还差iframe的border:两个象素
meizz
2003-02-27
打赏
举报
回复
在iframe页面里加入一段代码即可:
<body><SCRIPT LANGUAGE="JavaScript">
var s = "网页离屏幕左顶点高:"+ window.screenTop;
s += "\r\n网页离屏幕左顶点宽:"+ window.screenLeft;
alert(s);
</SCRIPT>
iframe
拖动功能..........
iframe
拖动........................................
js中window对象的属性1
(1)window.screenX,window.screenYwindow.screenX和window.screenY属性,返回浏览器窗口
左上角
相对
于当前屏
Vue组件之高德地图地址选择功能的实例代码
注:本文基于上一篇文章【Vue-Cli 3.0 中配置高德地图 】 ,采用直接引入高德 SDK 的方式来使用高德地图api 一、效果图 二、组件要实现的功能 1. 如果有传入
坐标
点,则定位到
坐标
点 2. 如果没有传入
坐标
点,则定位到当前所在
位置
3. 定位成功要在右侧显示经纬度和地址 4. 可以通过拖动 标记 来调整定位点 5. 标记 拖动后,右侧要显示拖动后的经纬度和地址 6. 点击确定按钮,返回最后的
坐标
点和地名给父组件 三、 组件实现具体代码 <div class=map-box :style={ width: width, height: height
ymprompt消息提示组件4.0【js插件弹出框美化版】
===============组件使用简要介绍=============== 1、在
页面
中引入ymPrompt.js。如:<script type="text/javascript" src="ymPrompt.js">页面中引入对应的皮肤文件的CSS,如:
3、自定义组件的默认配置信息(此步骤可选,该方法可以在任意时间调用)
页面
的js中通过ymPrompt.setDefaultCfg(cfg)方法修改组件部分或全部的默认属性。 如:ymPrompt.setDefaultCfg({maskAlpha:0.2,maskAlphaColor:'#00f'}) 组件的默认配置(对于没有设定的项将采用该配置项的默认值): { titleBar:true, //显示标题栏 fixPosition:true, //随滚动条浮动 dragOut:false, //不允许拖出
页面
autoClose:true, //点击按钮后自动关闭
页面
maskAlphaColor:'#000', //遮罩透明色 maskAlpha:0.1, //遮罩透明度 winAlpha:0.8, //拖动窗体时 窗体的透明度,默认为0.8 title: '标题', //消息框标题 message: '内容', //消息框按钮 width: 300, //宽 height: 185, //高
iframe
:false, btn:null, icoCls:'', handler: function(){} //回调事件 showMask: true, //是否显示遮罩 winPos: 'c', //弹出窗口默认
位置
closeBtn:true, //是否显示关闭按钮 //按钮文本,可通过自定义这些属性实现本地化 closeTxt: '关闭', okTxt:' 确 定 ', cancelTxt:' 取 消 ' } 4、根据您的需要调用相应的消息函数(两种参数传入方式): ymPrompt.alert(参数) //消息提示类型 ymPrompt.succeedInfo(参数) //成功信息类型 ymPrompt.errorInfo(参数) //错误信息类型 ymPrompt.confirmInfo(参数) //询问消息类型 ymPrompt.win(参数) //自定义窗口类型 参数传入方式包含两种: 第一种即传统的参数传入,按照顺序传入相应的参数值即可(一定要按照顺序),对于不需要设定的值请传入null。如ymPrompt.alert('内容',null,null,'标题') 参数顺序:message,width,height,title,handler,maskAlphaColor,maskAlpha,
iframe
,icoCls,btn,autoClose,fixPosition,dragOut,titleBar,showMask,winPos,winAlpha (推荐)第二种即JSON的传入方式,需要指定字段名,没有顺序,根据需要设定相关属性。如ymPrompt.alert({title:'标题',message:'内容'}) 五个方法的参数意义完全相同(所有参数均为可选,不传入则使用默认参数值),具体含义如下: message:消息组件要显示的内容,默认为“内容”。 width:消息框的宽度,默认为300。 height:消息框的高度,默认为185。 title:消息组件标题,默认为“标题” handler:回调函数。当确定/取消/关闭按钮被点击时会触发该函数并传入点击的按钮标识。如ok代表确定,cancel代表取消,close代表关闭 maskAlphaColor:遮罩的颜色,默认为黑色。 maskAlpha:遮罩的透明度,默认为0.1。 fixPosition:设定是否弹出框随滚动条一起浮动,保持在
屏幕
的固定
位置
,默认为true dragOut:设定是否允许拖出
屏幕
范围,默认为false。 autoClose:设定用户点击窗口中按钮后自动关闭窗口,默认为true(设定为false后程序中可以通过调用close方法关闭)。 titleBar:是否显示标题栏,默认显示。注意,如果没有标题栏需要自己在程序中控制关闭。 showMask:是否显示遮罩层,默认为true winPos:弹出窗口的
位置
,支持8种内置
位置
(c,l,t,r,b,lt,rt,lb,rb)及自定义窗口
坐标
,默认为c。 各参数意义:c:
页面
中间,l:
页面
左侧,t:
页面
顶部,r:
页面
右侧,b:
页面
顶部,lt:
左上角
,rt:右上角,lb:左下角,rb:右下角 winAlpha:弹出窗体拖动时的透明度,默认为0.8 //以下三个参数主要用于win方法(当然你也可以通过设定这些覆盖前面四个消息类型的默认属性)。
iframe
:是否使用
iframe
方法加载内容,该属性如果为true或者object,组件则尝试将message内容作为url进行加载(如果属性值为
一个
object,则将object的内容添加为
iframe
的属性,如
iframe
:{id:'myId',name:'myName',src:'http://www.baidu.com'}则
iframe
的id为myId,name为myName,src为http://www.baidu.com)。默认为false。 icoCls:图标类型。传入的内容为className,具体写法可以参考ymprompt.css中对图标的定义方式。默认为空。 btn:按钮定义。传入的是数组形式。每个按钮的格式为['按钮文本','按钮标识'], 如[['确定','ok'],['取消','cancel'],['关闭','close']]等。 注意单个按钮应该是这样的:[['确定','ok']] closeBtn:是否显示关闭按钮,默认为true(显示)。 //以下参数可用于对组件语言本地化,如用于英文等系统中 okTxt:确定按钮的文本描述,默认为“确定” cancelTxt:取消按钮的文本描述,默认为“取消” closeTxt:关闭按钮的文本描述(鼠标放在关闭按钮上时显示),默认为“关闭” 5、操作接口: 属性: version:当前版本号 如:alert(ymPrompt.version) pubDate:当前版本的发布日期 如:alert(ymPrompt.pubDate); cfg:组件的当前的默认配置 方法: setDefaultCfg(cfg):设定组件的默认属性,设定后的所有弹出均默认采用cfg中的设置。 如:ymPrompt.setDefaultCfg({maskAlpha:0.2,maskAlphaColor:'#00f'}); //设定遮罩层颜色为蓝色,透明度0.2 getPage():在
iframe
窗口模式下,获取到
iframe
的dom对象。 如:alert(ymPrompt.getPage().contentWindow.document.body.outerHTML); //获取
iframe
页面
的html内容 resizeWin(w,h):通过程序动态修改窗口的大小。参数:w:宽度,h:高度 如:ymPrompt.resizeWin(400,300); //修改弹出框宽度为400px,高度为300px doHandler(sign,autoClose):模拟触发某个按钮的点击事件。参数sign:传给回调函数的标识,autoClose:是否自动关闭窗口(默认采用全局配置) 如:ymPrompt.doHandler('ok',false); //触发确定按钮的点击事件,并且执行完回调函数后不关闭窗口 getButtons():获取当前弹出窗口的所有按钮对象,返回结果是
一个
对象集合(数组)。 如:var btnID=ymPrompt.getButtons()[0].id; //获取第
一个
按钮的id close():关闭当前弹出的窗口 如:ymPrompt.close() 6、其他说明:如果觉得“对象.方法”的调用方式比较麻烦,可以采用如下方式简化调用: 在调用之前设定var Alert=ymPrompt.alert。之后就可以使用Alert()的方式进行
网页制作高级特效教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案课件合集.ppt
网页制作高级特效教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案课件合集.ppt
JavaScript
87,996
社区成员
224,693
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章