ウェブページがオーバーレイで表示された場合、オーバーレイからURLを取得する方法

私は検索ページを持っています。今、ユーザーが特定のリンクをクリックしたときに検索ページを開きたいと思っていました。今私はいくつかのフィルタを選択するいくつかのクエリの検索を行うので、新しいパラメータがURLに追加されます。ウェブページがオーバーレイで表示された場合、オーバーレイからURLを取得する方法

たとえば、Google検索で「クラブ」クエリを検索すると、次の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

ように見える左側のオプションから私の検索と選択した画像フィルタをフィルタリング今私は、オーバーレイで私の検索ページを載せていきたいと思います。ユーザーがすべての検索を完了すると、オーバーレイの右下にある[OK]ボタンをクリックすることができます。だから、ユーザーが「OK」をクリックすると、検索ページが通常はGoogleの場合のようにタブウィンドウで開かれたときに生成されるURLが必要になります。

出典

2011-07-27 Saurabh Kumar

URLをプログラムでiframeに挿入するようにお願いしますか？ – James

私はiframeについて何も言及していませんでした –

例えば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

ウェブページがオーバーレイで表示された場合、オーバーレイからURLを取得する方法

答えて

関連する問題