<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
function initBK(){
var o = document.createElement('iframe');
o.id = 'fram_bk';
document.body.appendChild(o);
}
function popMenu(e){
var o = window.event?event.srcElement:e.target;
var p = getXY(e);
if (document.all){
if (!$('fram_bk')){initBK();}
with ($('fram_bk').style){
display='block';
top = p.y+"px";
left = p.x+"px";
height=$('menu').scrollHeight;
width=$('menu').scrollWidth;
}
}
with ($('menu').style){
display='block';
top = p.y+"px";
left = p.x+"px";
}
} function getXY(e){
var posx=0,posy=0;
if(e==null) e=window.event;
if(e.pageX || e.pageY){
posx=e.pageX; posy=e.pageY;
}
else if(e.clientX || e.clientY){
if(document.documentElement.scrollTop){
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else{
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
return {x:posx,y:posy};
}
function $(id){return document.getElementById(id)}
</script>
<style type="text/css">
div#menu{display:none;position:absolute;z-index:100;background:yellow;}
iframe#fram_bk{border:0;position:absolute;display:none;z-index:0;}
</style>
</head>
<body>
<button onclick="popMenu(event)">点我看看效果</button><br />
<div id="menu">jinyike.iteye.com</div>
<select><option>这是select哦</option></select>
</body>
</html>
分享到：
相关推荐
本篇文章将深入探讨两个关键知识点：`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念，它限制了浏览器从一个源获取另一个源的资源，以保护用户的安全。当`iframe...
3. **iframe跨域问题**：当iframe加载的页面与包含它的页面不在同一个域时，就会出现跨域问题，导致无法直接通过JavaScript进行通信，如获取iframe内的内容、设置iframe的属性等。 **二、iframe跨域的解决方案** 1...
2. iframe显示问题：由于WebView内部的iframe内容可能有独立的滚动条，这与ScrollView的滚动逻辑相互影响，可能导致iframe无法正常显示或滚动。 二、解决滚动冲突 1. 使用 NestedScrollView 替换 ScrollView：...
然而，`<iframe>`的高度自适应问题常常困扰着开发者，尤其是当`<iframe>`内部的内容动态加载或者变化时，如何让`<iframe>`自动调整其高度以适应内容，而不会导致滚动条溢出或内容被截断，成为了一个常见需求。...
在网页设计中，下拉菜单经常用于实现导航或者选项选择，但当这些菜单位于一个`iframe`元素内部时，可能会遇到被`iframe`遮挡的问题。这个问题主要涉及到浏览器的层叠上下文（CSS Z-Index）和`iframe`的渲染机制。...
在提供的压缩包文件 "iframe中fixed失效问题" 中，可能包含了具体的代码示例或演示页面，你可以直接打开查看这些案例，以更好地理解和应用上述解决方案。实际操作时，需要根据具体项目需求和限制选择合适的方法，...
内容概要：以vue2为例，搭建一个...2、使用position: fixed解决iframe的弹窗及遮罩层问题 3、使用requestFullscreen()解决iframe里的全屏问题 4、使用history解决浏览器的后退问题 5、页面刷新，iframe可以加载正确页面
在使用easyui框架开发Web应用时，特别是在使用tab布局的时候，开发者可能会遇到页面内容被放置在iframe中时，页面多次加载的问题。这种情况尤其会在使用easyui的tab布局时发生，因为easyui会默认加载所有tab的内容，...
通过对上述知识点的学习，我们可以更加灵活地利用JavaScript来处理`iframe`中的各种问题，包括但不限于访问、修改`iframe`内部元素、提交表单、调用方法以及触发事件等。这些技巧对于开发复杂的Web应用来说是非常...
标题中的“自定义客户端登录CAS服务器-iframe实现”是指在客户端应用中集成中央认证服务（Central Authentication Service，简称CAS）的登录功能，采用iframe技术来完成。CAS是一种开放源码的单点登录（Single Sign-...
本文将详细讲解如何利用IFrame解决这些问题，特别是针对Flex菜单的遮挡问题。 首先，理解Flex和IFrame的基本概念是必要的。Flex是一种基于ActionScript和MXML的开源框架，用于构建富互联网应用程序（RIA）。而...
"iframe去边框问题"主要涉及如何去除这些边框，以实现更加整洁、无缝的集成效果。以下是一些关于解决`iframe`边框问题和一级边框设置的知识点： 1. **CSS样式控制**： - `border`: 可以直接使用CSS的`border`属性...
在IT行业中，jQuery是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...下面我们将深入探讨iframe和jQuery的...通过研究这个项目，开发者可以提升在实际工作中处理iframe问题的能力。
然而，在处理多个iframe交互时，可能会遇到一个棘手的问题——双iframe互相刷新进入死循环。这个问题通常发生在两个或多个iframe之间尝试通过JavaScript互相重载对方，导致无限循环，严重影响用户体验并可能导致...
然而，由于浏览器的同源策略限制，当`iframe`加载的页面与包含它的页面不在同一个域名下时，就会遇到跨域问题。这篇博客将深入探讨如何解决`iframe`的跨域问题。 首先，理解同源策略是至关重要的。同源策略是浏览器...
这种问题在 Ajax 盛行以前并不是什么大问题，因为都是通过页面跳转和刷新来进行与服务端的交互，但是现在情况不一样了，很多应用广泛应用 Ajax 和 iframe，结果内存泄漏成了很多富客户端应用的隐患。 Iframe 内存...
它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域认证。 提供了一系列的页面大小的计算方法来支持复杂的CSS布局。 检测修改DOM...
在前端开发过程中，DIV元素被IFRAME遮挡是一个常见的问题，尤其是当页面布局复杂或存在多层嵌套的元素时。以下将详细阐述几种DIV被IFRAME遮挡的情况，并提供相应的解决方法。 首先，要了解的是IFRAME是一种HTML元素...
然而，由于浏览器的安全策略，特别是对于第三方cookie的处理，开发者可能会遇到在特定浏览器如Safari、Opera以及某些使用特定内核的搜狗浏览器中无法读取`iframe`内的cookie的问题。这个问题主要源于浏览器对第三方...