使用javascript在基於下拉框選擇的集中彈出窗口中打開鏈接

我正在尋找一種解決方案，可以讓我將兩個腳本合併在一起，並以跨瀏覽器友好的方式一起工作，並符合XHTML 1.0 Transitional標準。使用javascript在基於下拉框選擇的集中彈出窗口中打開鏈接

第一個腳本是基於下拉選擇打開文件/位置。

這裏的腳本：

<script type="text/javascript"> 
//<![CDATA[ 
<!-- 
function go(){ 
if (document.fooform.fooselect.options[document.fooform.fooselect.selectedIndex].value != "none") { 
location = document.fooform.fooselect.options[document.fooform.fooselect.selectedIndex].value 
    } 
} 
//--> 
//]]> 
</script>

這裏的標記：

<form name="fooform"> 
<select name="fooselect"> 
    <option selected="selected" value="#">Select a file</option> 
    <option value="pdfs/somefile1.pdf">file 1</option> 
    <option value="pdfs/somefile2.pdf">file 2</option> 
    <option value="pdfs/somefile3.pdf">file 3</option> 
    <option value="pdfs/somefile4.pdf">file 4</option> 
</select> 
    <input onclick="go()" type="button" value="Get PDF" /> 
</form>

漂亮的直線前進...

第二個腳本是ofcourse，作爲標題的狀態，一個打開一箇中心彈出。

這裏的腳本：

<script type="text/javascript"> 
//<![CDATA[ 
<!-- 
function PopupCenter(pageURL, title,w,h) { 
var left = (screen.width/2)-(w/2); 
var top = (screen.height/2)-(h/2); 
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left); 
} 
//--> 
//]]> 
</script>

這裏的標記：

<input onclick="PopupCenter('http://www.stackoverflow.com', 'popfoo',400,400);" type="button" value="Open Center Popup" />

所以我的挑戰是，當用戶點擊「獲取PDF」按鈕，中心彈出打開創建一個腳本包含PDF文件，並且該PDF文件將根據他們從下拉列表中選擇的選項而改變。

我要在頁面上的多個下拉列表，所以最有可能的腳本將document.fooform.fooselect.options改變document.form1.select1.options，document.form2.select2.options，等...和功能會像go1()，go2()等..

任何幫助/提示/建議，非常感謝！

UPDATE星期四，2012年11月22日

我想過犧牲中心彈出功能，以代替剛剛得到這個腳本打開一個新窗口PDF，到目前爲止，我已經嘗試：

<input type="button" value="Get PDF" onclick="window.open(go().href); return false;" />

以及

<input type="button" value="Get PDF" onclick="window.open(go(), 'USER GUIDE', 'width=500,height=300');" />

但是這兩個輸入端只需打開在同一窗口中的PDF，這就是我試圖避免的。

如果我只是嘗試合併上述兩個腳本，像這樣：

<script type="text/javascript"> 
//<![CDATA[ 
<!-- 
function PopupCenter(pageURL, title, w, h) { 
    var left = (screen.width/2) - (w/2); 
    var top = (screen.height/2) - (h/2); 
    var targetWin = window.open(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); 
    } 

    var go = function go() { 
if (document.fooform.fooselect.options[document.fooform.fooselect.selectedIndex].value != "none") { 
location = document.fooform.fooselect.options[document.fooform.fooselect.selectedIndex].value 
    } 
} 
//--> 
//]]> 
</script>

，然後使用下面的輸入觸發：

<input onclick="PopupCenter('go()', 'popfoo',400,400);" type="button" value="Get PDF" />

或

<input onclick="PopupCenter('go', 'popfoo',400,400);" type="button" value="Get PDF" />

我得到錯誤消息：

Windows Internet Explorer

找不到'file：/// W：/ test/go（）'。確保路徑或Internet地址是正確的。

[OK]

或

的Windows Internet Explorer

無法找到 '文件：///寬：/測試/去'。確保路徑或Internet地址是正確的。

[OK]

，如果我沒有單引號嘗試輸入像這樣

<input onclick="PopupCenter(go(), 'popfoo',400,400);" type="button" value="Get PDF" />

我得到的錯誤信息：

的Windows Internet Explorer

Cann找到'file：/// W：/ test/undefined'。確保路徑或Internet地址是正確的。

[OK]

，然後PDF在同一窗口我點擊OK上的錯誤消息後打開。

請幫忙!!提前:)

更新2週四，11月22日非常感謝，2012

得到它在IE（只，不幸）在此fiddle

基本上改變，那麼location = document.fooform.fooselect.options[document.fooform.fooselect.selectedIndex].value工作，並宣佈location作爲變量（我認爲這不是一個好主意，因爲location是一個全局變量 - 如果有人能夠說明這一點，那就太好了），然後添加該行window.open(location)

想要跨瀏覽器友好並希望得到一些幫助tweeking新的窗口調用（仍然希望居中它，並最好從新窗口中刪除一些不需要的東西，如工具欄，狀態欄等）等

提前致謝！

來源

2012-11-20 abracassabra

當您爲彈出窗口生成標記/ javascript時，生成居中代碼並將其執行。在我看來，這是最簡單的方法。有關最佳實施方式的詳細信息取決於您的服務器託管環境及其功能。你的foo腳本對我來說太混亂了，試圖解析它實際上做了什麼。 – SAJ14SAJ

嘿@ SAJ14SAJ，所以如果我理解正確的話，在我的彈出窗口（讓我們把它叫做popup.html作爲例子）我應該將居中代碼嵌入到該文件中並讓它執行onLoad？我知道如何在window上移動一個窗口，例如''但我不確定如何調整大小或在窗口中心放置一個窗口。另外，我最好喜歡在彈出窗口（工具欄，狀態欄等...）中刪除一些不必要的內容。在該窗口加載完成後可以這樣做嗎？感謝您的提示:) – abracassabra

P.S.我的混淆foo腳本的appologies。如果你參考我的小提琴@ http://jsfiddle.net/77buX/它可能會幫助你更好地理解我想要達到的目標。它不幸的只能在IE中運行。 – abracassabra

不居中彈出，但做我需要（主要）做。請參閱jsfiddle http://jsfiddle.net/77buX/

<!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" xml:lang="en" lang="en"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="description" content="" /> 
    <meta name="keywords" content="" /> 
    <title>test</title> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      var UG1 = function getUG1() { 
       if (document.form1.select1.options[document.form1.select1.selectedIndex].value != "none") { 
        var location = document.form1.select1.options[document.form1.select1.selectedIndex].value; 
        window.open(location) 
       } 
      } 

      var UG2 = function getUG2() { 
       if (document.form2.select2.options[document.form2.select2.selectedIndex].value != "none") { 
        var location = document.form2.select2.options[document.form2.select2.selectedIndex].value; 
        window.open(location) 
       } 
      } 
     </script> 
     <form action="" name="form1"> 
      <p class="clear"> 
       <select name="select1" style="width: 10.5em"> 
        <option selected="selected" value="#">Select a user guide</option> 
        <option value="http://manuals.info.apple.com/en_US/ipad_user_guide.pdf">ipad user guide</option> 
        <option value="http://manuals.info.apple.com/en_US/iphone_user_guide.pdf">iphone user guide</option> 
       </select> 
       <input onclick="getUG1()" type="button" value="Get PDF" /> 
      </p> 
     </form> 
     <br /> 
     <br /> 
     <form action="" name="form2"> 
      <p class="clear"> 
       <select name="select2" style="width: 10.5em"> 
        <option selected="selected" value="#">Select a user guide</option> 
        <option value="http://docs.blackberry.com/en/smartphone_users/deliverables/1202/userguide_bb8330_cdma.pdf">blackberry 8330 user guide</option> 
        <option value="http://cb.vu/unixtoolbox.pdf">unix toolbox</option> 
       </select> 
       <input onclick="getUG2()" type="button" value="Get PDF" /> 
      </p> 
     </form> 
    </body> 

</html>

來源

2012-12-03 17:57:33 abracassabra

使用javascript在基於下拉框選擇的集中彈出窗口中打開鏈接

回答

相關問題