0

2つのスクリプトを組み合わせて、ブラウザー間で使いやすい方法で連携させ、XHTML1.0Transitional標準に準拠できるソリューションを探しています。

最初のスクリプトは、ドロップダウン選択に基づいてファイル/場所を開きます。

スクリプトは次のとおりです。

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

かなり簡単です...

2番目のスクリプトはもちろん、タイトルが示すように、中央にポップアップを開くスクリプトです。

スクリプトは次のとおりです。

<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.optionsdocument.form2.select2.options、などのようgo1()になります。go2()

ヘルプ/ヒント/提案は大歓迎です!

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を開くだけであり、それは私が避けようとしていることです。

そして、上記の2つのスクリプトを次のようにマージしようとすると、次のようになります。

<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()'が見つかりません。パスまたはインターネットアドレスが正しいことを確認してください。

[わかった]

また

Windows Internet Explorer

'file:/// W:/ test/go'が見つかりません。パスまたはインターネットアドレスが正しいことを確認してください。

[わかった]

そして、私がそのように入力に一重引用符なしで試してみると

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

エラーメッセージが表示されます:

Windows Internet Explorer

'file:/// W:/ test/undefined'が見つかりません。パスまたはインターネットアドレスが正しいことを確認してください。

[わかった]

エラーメッセージで[ OK ]をクリックすると、PDFが同じウィンドウで開きます。

助けてください!!よろしくお願いします:)

UPDATE2 2012年11月22日木曜日

このフィドルでIEで(残念ながらのみ)動作するようになりました

基本的に変更され、変数としてlocation = document.fooform.fooselect.options[document.fooform.fooselect.selectedIndex].value宣言さlocationれ(グローバル変数であるため、これはお勧めできません。location誰かがそれに光を当てることができれば、それは素晴らしいことです)、次の行を追加しました。window.open(location)

クロスブラウザフレンドリーにし、新しいウィンドウの呼び出しを調整するのに役立つことを願っています(それでも中央に配置し、ツールバーやステータスバーなどの不要なものを新しいウィンドウから削除することをお勧めします)

前もって感謝します!

4

1 に答える 1

0

ポップアップを中央に配置しませんが、(主に) 必要なことを行います。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-03T17:57:33.637 に答える