iframe和鼠标位置 [英] Iframes and Mouse Position

查看:79
本文介绍了iframe和鼠标位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个非常专业的阴谋电影网站

我使用了大量的图层和一个外部滚动条组件。

我想将各个部分放入MS iframes和

为了清理页面,但我发现iframe会干扰

,从屏幕上获取鼠标坐标是

在移动滚动条时必不可少。


我的测试html如下所示。隐藏iframe可以获得鼠标指针

。随着iframe可见事情变得越来越糟糕。

其中background_foriframe.html只是一个html文件,

是一个使用DIV的背景图层。标签。


< Div id =''Main_Page_Background''

style =''position:absolute;

filter: alpha(不透明度= 60);

剪辑:rect(0,5000,5000,0);

宽度:1px;高度:1px;

left:0px; top:0px; z-index:50''>

< table border = 0 cellpadding = 0 cellspacing = 0>

< tr>< td bgcolor =" #AAAAAA" background =" imgs / background_metalback.jpg">

< img src =" imgs / trans.gif" ID = QUOT; main_page_bg" width = 5000 height = 5000

border = 0>

< / td>< / tr>< / table>

< ; / div>


< html>

< head>


< base href =" ">

< meta http-equiv =" imagetoolbar" content =" no">


< / head>


< body bgcolor ="#CCCCCC">

< Div id =''Main_Background_Iframe''

style =''position:absolute;

visibility:hidden;

剪辑:rect(0,5000,5000,0);

宽度:1px;高度:1px;

左:0px;顶部:0px; z- index:50''>

< iframe src =" background_foriframe.html"宽度= QUOT; 5000" height =" 5000"

name =" background_iframe" FRAMEBORDER =" 0" scrolling =" no"

allowtransparency =" true">

< / iframe>

< / Div>

<! - 点击n移动脚本----------------------------------- --->

<! - 点击n Move Scripts ---------------------------- ---------->

<! - 点击n Move Scripts --------------------- ----------------->

<! - 点击n移动脚本-------------- ------------------------>

<! - 点击n移动脚本------- ------------------------------->

<! - 点击n移动脚本-------------------------------------->

< ! - 点击n Move Scripts -------------------------------------->

<! - Click n Move Scripts ------------------------------------ - >

<! - 点击n Move Scripts ----------------------------- --------->

<! - 点击n移动脚本---------------------- ---------------->


< script language =" JavaScript">


var ms_x,x_offset;


var ms_y,y_offset;

document.onmousemove = cm_mouseMove;

// - MOUSE MOVE -----------------------

function cm_mouseMove(e){

ms_x = event.x + document.body.scrollLeft;

ms_y = event.y + document.body.scrollTop;


if(ms_x< 0){ms_x = 0;}

if(ms_y< 0){ms_y = 0;}


document.xy_display.xcoord.value = ms_x ;

document.xy_display.ycoord.value = ms_y;


返回false;


}

// - MOUSE MOVE -----------------------



< / script>


<! - 点击n移动脚本---------------- ---------------------->

<! - 点击n移动脚本--------- ----------------------------->

<! - 点击n移动脚本 - ------------------------------------>

<! - - 点击n Move Scripts -------------------------------------->

<! - Click n Move Scripts -------------------------------------- >

<! - 点击n移动脚本------------------------------- ------->

<! - 点击n移动脚本------------------------ -------------->

<! - 点击n移动脚本----------------- --------------------->

&l t;! - 单击n Move Scripts -------------------------------------->

<! - 点击n移动脚本---------------------------------- ---->


<!----------------------------- - >

<! - XY Coord Display ------------->

<!---- --------------------------->

< Div id =" XY_Coord_Dispay_Assembly"

style =" position:absolute;

宽度:100;身高:100;

剪辑:rect(0,500,500,0);

左:0px; top:0px; z-index:200;">


< form name =" xy_display">


< Div id =" XY_Coord_Background"

style =" position:absolute;

filter:alpha(opacity = 50);

width:100;身高:100;

剪辑:rect(0,200,200,0);

左:0px; top:0px; z-index:100;">

< table border = 0 cellpadding = 0

cellspacing = 0>< tr>< td> ;

< img src =" imgs / xy_coord_body.gif" border = 0

< / td>< / tr>< / table>

< / div>


< Div id =" X_Coor_Display"

style =" position:absolute;

width:100;身高:100;

剪辑:rect(4,33,17,2);

左:36px;顶部:0px; z-index:100;">

< table border = 0 width = 38 cellpadding = 0 cellspacing = 0>< tr>< td>

< input type =" text"大小= QUOT; 5英寸命名= QUOT; XCOORD" value =" 0"

style =" background-color:transparent;

color:black" ;;>

< / td>< / tr>< / table>

< / div>


< Div id =" Y_Coor_Display"

style =" position:absolute;

宽度:100;身高:100;

剪辑:rect(4,33,17,2);

左:36px; top:15px; z-index:100;">

< table border = 0 width = 38 cellpadding = 0 cellspacing = 0>< tr>< td>

< input type =" text"大小= QUOT; 5英寸命名= QUOT; YCOORD" value =" 0"

style =" background-color:transparent;

color:black" ;;>

< / td>< / tr>< / table>

< / div>


< Div id =" X_Coor_Display"

style =" position:absolute;

宽度:100;身高:100;

剪辑:rect(4,33,17,2);

左:36px;顶部:32px; z-index:100;">

< table border = 0 width = 38 cellpadding = 0 cellspacing = 0>< tr>< td>

< input type =" text"大小= QUOT; 5英寸名称= QUOT; x_layer" value =" 0"

style =" background-color:transparent;

color:black" ;;>

< / td>< / tr>< / table>

< / div>


< Div id =" Y_Coor_Display"

style =" position:absolute;

宽度:100;身高:100;

剪辑:rect(4,33,17,2);

左:36px; top:48px; z-index:100;">

< table border = 0 width = 38 cellpadding = 0 cellspacing = 0>< tr>< td>

< input type =" text"大小= QUOT; 5英寸名称= QUOT; y_layer" value =" 0"

style =" background-color:transparent;

color:black" ;;>

< / td>< / tr>< / table>

< / div>

< / form>


< / div>

<!------------------------------->

<! - XY Coord Display ------------->

<!--------- ---------------------->


< / html>

解决方案



< wm **** @ yahoo.comwrote in message

news:11 ** ********************@e3g2000cwe.googlegro ups.com ...


>我有一个真正专业的阴谋电影网站

我使用了大量的图层和一个外部滚动条组件。

我想将各个部分放入MS Iframes和

为了清理页面但我发现iframe会干扰

从屏幕上获取鼠标坐标移动滚动条至关重要。


我的测试html如下所示。隐藏iframe可以获得鼠标指针

。随着iframe可见事情变得越来越糟糕。



很多人可能希望看到工作正在进行中。所以他们可以直接看到

会出现什么问题。

如果你有一个工作页面,你想要纠正错误,
$ b发布链接的$ b会有所帮助。

我注意到你使用的是内联式风格而不是离页CSS文件

甚至在head中定义。

以及嵌入式javascript。


iframe的主要问题是,它本身仍然是一个页面

你网站上的其他内容。

你需要的是一个脚本,它将触及到那个其他的页面和工作

用它。


还有什么'有这么大的iframe而且没有滚动的意思?

我怎么能看到还有什么呢?


richard写道:


< wm****@yahoo.com写信息

news:11 ********************** @ e3g2000cwe.googlegro ups。 com ...


我有一个非常专业的阴谋电影网站

我使用了大量的图层和一个外部滚动条组件。

我想将各个部分放入MS Iframes和

以便清理电子页面,但我发现iframe会干扰

从屏幕上获取鼠标坐标,这对于移动滚动条至关重要。


我的测试html如下。隐藏iframe可以获得鼠标指针

。随着iframe可见事情变得越来越糟糕。



很多人可能希望看到工作正在进行中。所以他们可以直接看到

会出现什么问题。

如果你有一个工作页面,你想要纠正错误,
$ b发布链接的$ b会有所帮助。

我注意到你使用的是内联式风格而不是离页CSS文件

甚至在head中定义。

以及嵌入式javascript。


iframe的主要问题是,它本身仍然是一个页面

你网站上的其他内容。

你需要的是一个脚本,它将触及到那个其他的页面和工作

用它。


还有什么'有这么大的iframe而且没有滚动的意思?

我怎么能看到还有什么?



当这个稀疏测试页面上包含Iframe时

鼠标位置的读数崩溃了

意味着iframe引起问题时它会对获得鼠标没有任何影响

coords。如果您查看我的index_1.html页面

mansueact.com您将找到所有答案_所有

div是可见的并且所有脚本都可见。我想要

用iframe整理页面,其中与图层相关的脚本

将包含在

对应的iframe中。然后页面只是

是一组带有嵌套Iframe标签的Div标签,然后我会在$ B $周围移动并调用

iframe中的函数。但是用户不会知道这一点。


我假设如果我能用鼠标显示

iframe可见,那么我可以使页面的其余部分工作。


主要问题是我的页面滚动条和用户

无法点击并在页面上移动它使用

iframes。并且,它是一个非常整洁的滚动条。


另外,我只使用和代码为MSIE。


感谢您的快速回复。


>来自奥兰多,



被放逐的名人出版商。


wm****@yahoo.com 写道:

< snip>


另外,我只使用和编码MSIE。



上个月在我的网站上我的服务器日志显示只有53%的MSIE而且

已从98%下降了一些几年前。所以你没关系

转过一半的观众。哦!等待!我不在IE工作

...也许你要重新考虑你的设计?


-

小心,


Jonathan

-------------------

LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com


I have a really professional conspiracy movie site
and I use tons of layers and an external scroll bar assembly.
I would like to put the various sections into MS Iframes and
in order to clean up the page but I find that the iframes interfere
with the getting the mouse coords from the screen which is
essential in moving the scroll bar around.

My test html is given below. With the iframe hidden the mouse coords
are obtainable. With the iframe visible things get buggy.
Where the "background_foriframe.html" is just a html file with
a background layer using a "DIV" tag.

<Div id=''Main_Page_Background''
style=''position:absolute;
filter:alpha(opacity=60);
clip:rect(0,5000,5000,0);
width:1px;height:1px;
left:0px;top:0px;z-index:50''>
<table border=0 cellpadding=0 cellspacing=0>
<tr><td bgcolor="#AAAAAA" background="imgs/background_metalback.jpg">
<img src="imgs/trans.gif" id="main_page_bg" width=5000 height=5000
border=0>
</td></tr></table>
</Div>


<html>
<head>

<base href=" ">
<meta http-equiv="imagetoolbar" content="no">

</head>

<body bgcolor="#CCCCCC">
<Div id=''Main_Background_Iframe''
style=''position:absolute;
visibility:hidden;
clip:rect(0,5000,5000,0);
width:1px;height:1px;
left:0px;top:0px;z-index:50''>
<iframe src="background_foriframe.html" width="5000" height="5000"
name="background_iframe" frameborder="0" scrolling="no"
allowtransparency="true">
</iframe>
</Div>
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->

<script language="JavaScript">

var ms_x, x_offset;

var ms_y, y_offset;
document.onmousemove = cm_mouseMove;
//--MOUSE MOVE-----------------------
function cm_mouseMove(e){
ms_x = event.x+document.body.scrollLeft;
ms_y = event.y+document.body.scrollTop;

if (ms_x < 0){ms_x = 0;}
if (ms_y < 0){ms_y = 0;}

document.xy_display.xcoord.value = ms_x;
document.xy_display.ycoord.value = ms_y;


return false;

}
//--MOUSE MOVE-----------------------


</script>


<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->
<!--Click n Move Scripts-------------------------------------->

<!------------------------------->
<!--XY Coord Display------------->
<!------------------------------->
<Div id="XY_Coord_Dispay_Assembly"
style="position:absolute;
width:100; height:100;
clip:rect(0,500,500,0);
left:0px;top:0px;z-index:200;">

<form name="xy_display">

<Div id="XY_Coord_Background"
style="position:absolute;
filter:alpha(opacity=50);
width:100; height:100;
clip:rect(0,200,200,0);
left:0px; top:0px;z-index:100;">
<table border=0 cellpadding=0
cellspacing=0><tr><td>
<img src="imgs/xy_coord_body.gif" border=0
</td></tr></table>
</Div>

<Div id="X_Coor_Display"
style="position:absolute;
width:100; height:100;
clip:rect(4,33,17,2);
left:36px; top:0px;z-index:100;">
<table border=0 width=38 cellpadding=0 cellspacing=0><tr><td>
<input type="text" size="5" name="xcoord" value="0"
style="background-color:transparent;
color:black";>
</td></tr></table>
</Div>

<Div id="Y_Coor_Display"
style="position:absolute;
width:100; height:100;
clip:rect(4,33,17,2);
left:36px; top:15px;z-index:100;">
<table border=0 width=38 cellpadding=0 cellspacing=0><tr><td>
<input type="text" size="5" name="ycoord" value="0"
style="background-color:transparent;
color:black";>
</td></tr></table>
</Div>

<Div id="X_Coor_Display"
style="position:absolute;
width:100; height:100;
clip:rect(4,33,17,2);
left:36px; top:32px;z-index:100;">
<table border=0 width=38 cellpadding=0 cellspacing=0><tr><td>
<input type="text" size="5" name="x_layer" value="0"
style="background-color:transparent;
color:black";>
</td></tr></table>
</Div>

<Div id="Y_Coor_Display"
style="position:absolute;
width:100; height:100;
clip:rect(4,33,17,2);
left:36px; top:48px;z-index:100;">
<table border=0 width=38 cellpadding=0 cellspacing=0><tr><td>
<input type="text" size="5" name="y_layer" value="0"
style="background-color:transparent;
color:black";>
</td></tr></table>
</Div>
</form>

</Div>
<!------------------------------->
<!--XY Coord Display------------->
<!------------------------------->

</html>

解决方案


<wm****@yahoo.comwrote in message
news:11**********************@e3g2000cwe.googlegro ups.com...

>I have a really professional conspiracy movie site
and I use tons of layers and an external scroll bar assembly.
I would like to put the various sections into MS Iframes and
in order to clean up the page but I find that the iframes interfere
with the getting the mouse coords from the screen which is
essential in moving the scroll bar around.

My test html is given below. With the iframe hidden the mouse coords
are obtainable. With the iframe visible things get buggy.

A lot of people might want to see the work in action. So they can see
firsthand what problems might be.
If you have a working page, with the errors you''re seeking to correct,
posting the link would help.
I did notice you''re using inline "style" as opposed to an off page CSS file
or even defining in the "head".
As well as embedded javascript.

The major problem with an iframe is, it is still a page by itself somewhere
else on your site.
What you need is a script that will reach out to that other page and work
with it.

Also what''s the point of having such a huge iframe and no scrolling?
How am I expected to see what else there is?


richard wrote:

<wm****@yahoo.comwrote in message
news:11**********************@e3g2000cwe.googlegro ups.com...

I have a really professional conspiracy movie site
and I use tons of layers and an external scroll bar assembly.
I would like to put the various sections into MS Iframes and
in order to clean up the page but I find that the iframes interfere
with the getting the mouse coords from the screen which is
essential in moving the scroll bar around.

My test html is given below. With the iframe hidden the mouse coords
are obtainable. With the iframe visible things get buggy.


A lot of people might want to see the work in action. So they can see
firsthand what problems might be.
If you have a working page, with the errors you''re seeking to correct,
posting the link would help.
I did notice you''re using inline "style" as opposed to an off page CSS file
or even defining in the "head".
As well as embedded javascript.

The major problem with an iframe is, it is still a page by itself somewhere
else on your site.
What you need is a script that will reach out to that other page and work
with it.

Also what''s the point of having such a huge iframe and no scrolling?
How am I expected to see what else there is?


When the Iframe is included on this sparse test page
the readout of the mouse position crashes which
means that the iframe is causing problems when it
should have no effect on obtaining the mouse
coords. If you look at my index_1.html page at
mansueact.com you''ll find all your answers__all the
divs are visible and all the scripting is visible. I''d like
to tidy up the page with Iframes where the scripts
associated with the layers would be contained in
the corresponding iframe. The page would then just
be a group of Div tags with nested Iframe tags and I
would then be moving around the Divs and calling
functions in the Iframes. But the user wouldn''t know this.

I''m assuming that if I can get the mouse coords with an
iframe visible then I can make the rest of the page work.

The major problem is my page scroll bar and that the user
cannot click and move it around the page when I use
Iframes. And, it is a very neat scroll bar.

Also, I only use and code for MSIE.

Thank you for your quick response.

>From Orlando,

The Banished Celebrity Publisher.


wm****@yahoo.com wrote:
<snip>

Also, I only use and code for MSIE.

Well for last month on my site my server log showed only 53% MSIE and it
has been dropping from 98% just a few years ago. So you are okay with
turning away maybe half your audience. Oh! Wait! I doesn''t work in IE
either...maybe you aught to rethink your design?

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com


这篇关于iframe和鼠标位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆