如果網頁顯示在覆蓋圖中，如何從覆蓋圖獲取網址

我有一個搜索頁面。現在，我想在用戶點擊某個鏈接時打開搜索頁面。現在我做一些查詢搜索，選擇一些過濾器，以便我繼續將新參數添加到網址。如果網頁顯示在覆蓋圖中，如何從覆蓋圖獲取網址

例如，當我在谷歌搜索中搜索「俱樂部」查詢時，我看到以下網址。

 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

現在，我從左側選項過濾我的搜索和選擇圖像過濾我的網址如下所示

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案例。

來源

2011-07-27 Saurabh Kumar

您是否要求以編程方式將URL放入iframe？ – James

我沒有提及Iframe的任何地方 –

我的意思是Overlay，例如http://jsfiddle.net/cmssites/FRDKq/16/ –

-1

使用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>

來源

2011-07-27 22:42:18 James

如果網頁顯示在覆蓋圖中，如何從覆蓋圖獲取網址

回答

相關問題