如何从覆盖得到URL,如果网页显示在覆盖
How to get URL from an overlay if the webpage was shown in an overlay
我有一个搜索页面。现在我想在用户点击某个链接时打开搜索页面。现在我做一些查询搜索,选择一些过滤器,以便我继续新的参数被添加到url。
例如,当我在谷歌搜索中搜索"俱乐部"查询时,我看到以下url。
http://www.google.com/#sclient=psy&hl=en&source=hp&q=club&pbx=1&oq=club&aq=f&aqi=g5&aql=&gs_sm=e&gs_upl=257848l258668l2l259633l5l4l0l0l0l3l462l1655l3-1.3l4&bav=on.2,or.r_gc.r_pw.&fp=aeb16183bfd07c66&biw=1280&bih=628
现在我过滤我的搜索和选择图像过滤器从左边的选项,我的url看起来像下面的
http://www.google.com/search?q=club&hl=en&biw=1280&bih=628&prmd=ivnsm&source=lnms&tbm=isch&ei=_4wwTsvfNdDQsgac0cz0Dw&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CBAQ_AUoAQ
现在我想把我的搜索页面在一个覆盖。然后当用户完成所有搜索后,他可以点击覆盖层右下角的"确定"按钮。因此,当用户点击"确定"时,我想要的URL是在搜索页面通常在标签窗口中打开时生成的,就像上面显示的google case。
可以使用JavaScript、css和iframe来完成单独站点的覆盖(或者在您提供的示例中是模态覆盖)。
如果你对使用现有的库感兴趣,jQuery ui有一个非常好的覆盖,他们称之为对话框。http://jqueryui.com/demos/dialog/
如果您不想使用库,则必须执行与以下代码类似的操作。注意:这段代码是非常基础的,并没有通过使用处理覆盖的库提供很多可用的功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script language="javascript" type="text/javascript">
//Define a class to create and control the overlay
function overlay(width, height) {
var container, iframe;
this.setLocation = function(url) {
iframe.setAttribute('src', url);
}
this.getLocation = function(url) {
return iframe.getAttribute('src');
}
this.show = function() {
container.style.display = 'block';
}
this.hide = function() {
container.style.display = 'none';
}
function windowSize() {
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
return [ winW, winH ];
};
(function() {
//create the containing element
container = document.createElement('div');
container.style.position = 'fixed';
container.style.top = '0px';
container.style.left = '0px';
container.style.right = '0px';
container.style.bottom = '0px';
container.style.zIndex = 1000;
container.style.backgroundColor = 'rgba(0, 0, 0, .5)';
//create the iframe
iframe = document.createElement('iframe');
iframe.setAttribute('frameborder', 0);
iframe.style.position = 'absolute';
iframe.style.width = width + 'px';
iframe.style.height = height + 'px';
iframe.style.left = ((windowSize()[0] - width) / 2) + 'px';
iframe.style.top = ((windowSize()[1] - height) / 2) + 'px';
container.appendChild(iframe);
document.body.appendChild(container);
})(this)
}
//create an overlay object, set it's location, and show it
var win = new overlay(700, 400);
win.setLocation('http://www.google.com/');
win.show();
</script>
</body>
</html>
相关文章:
- 在循环中分配json值时,值被覆盖
- 谷歌地图固定位置覆盖
- 只覆盖箭头键滚动事件
- 如何防止网页加载后自动启动功能
- JQuery覆盖不更改单选选项
- 如何覆盖锚点元素's href目标,并在我点击转到目标javascript时删除其他错误
- 如何使用Node.js最有效地解析网页
- 刷新后保留对网页的更改
- AJAX不会在文件上传后重定向到网页-POST方法
- 使用谷歌网站翻译器自动翻译网页
- 如何将可调整大小、可拖动的覆盖添加到网页中
- 谷歌分析当前网页浏览网址被事件覆盖
- 在网页加载后覆盖现有的javascript方法应该是可能的
- HTML 5画布覆盖在网页的顶部
- 覆盖HTML 5输入类型文件,相机与图像/文本从HTML网页
- 如何在被覆盖的网页上恢复console.log
- 开发一个Firefox/Chrome扩展,覆盖形状的网页
- 自容器可关闭的全屏模式覆盖现有网页
- 如何从覆盖得到URL,如果网页显示在覆盖
- 在图像和网页内容之间形成透明的白色覆盖