web-dev-qa-db-ja.com

アンカータグでjavascriptwindow.open（elementName.elementValue）を使用して、新しいタブでページを開きます

過去数日間にたくさんの例を調べましたが、それでも私のジレンマに対する答えを見つけることができません。私のジレンマを最初に説明するために、私が持っているものの例を示し、次にそれがどのように機能するかを説明します（しかし、達成できないようです）。

これは機能します：

<form>
<select name="url">
    <option selected="selected" value=""> Choose Donation Amount </option>
    <option value="http://www.url1.com">URL#1</option>
    <option value="http://www.url2.com">URL#2</option>
    <option value="http://www.url3.com">URL#3</option>
    <option value="http://www.url4.com">URL#4</option>
    <option value="http://www.url5.com">URL#5</option>
    <option value="http://www.url6.com">URL#6</option>
</select>
<input type="submit" value="Submit" onclick="if (url.value) window.open(url.value);" />
</form>

しかし、私がやりたいのは、オプションをキャプチャし、（input [type "submit"]ではなく）アンカータグを使用してURLを開くことです（input [type "submit"]ではなく）。

<a href="javascript:void(if (url.value) window.open(url.value));" target="_blank">Submit</a>

上記の行は機能せず、正しく形成する方法がわかりません。助けて？

特に送信ボタンを使用してすでに機能しているため、これは論理的ではないように思われますが、入力またはボタンtype = "submit" 、、、またはを使用したくない理由を正確に説明することも実用的ではありません。 PHP。アンカータグ内のインラインJavaScriptである必要があります。ありがとう:-)

javascripthrefwindow.open
7
Jeff

次のようなフォームname属性を追加します。

<form name="form">

...そしてそれを次のように試してください：

<a href="" onclick="window.open( form.url.value, 'windowName' ); return false" target="_blank">Submit</a>

動作している 例 。

7
PrimosK

オプションを選択しながらURLを開きたいだけなのに、なぜフォームを使用したのかわかりません。以下のコードをお読みください。

<select name="url" onchange="window.open(this.options[this.selectedIndex].value,'_blank')">

これは、IE5でもすべてのブラウザーでうまく機能します。

2
Hirav

これは長いですが、これまでのところうまくいきました

<a href="javascript:void((function(){ val=document.getElementsByName('url')[0].value; if(val) window.open(val)})())">click</a>

1
Tina CG Hoehr

JavaScriptは、新しいタブで開くかどうかをブラウザが制御するため、JavaScriptの使用を忘れることができます。代わりに、次のようなことを行うのが最善の方法です。

<form action="http://www.yoursite.com/dosomething" method="get" target="_blank">
    <input name="dynamicParam1" type="text"/>
    <input name="dynamicParam2" type="text" />
    <input type="submit" value="submit" />
</form>

これは、target="_blank"属性により、クライアントが使用するブラウザに関係なく、常に新しいタブで開きます。

動的パラメータなしでリダイレクトするだけでよい場合は、target="_blank"属性を持つリンクを使用できます。

<a href="http://www.youresite.com" target="_blank">redirect</a>
0
Tony

同様の要件もありました。ユーザーがクリックしたときにajax呼び出しを使用して、サーバー側からhrefURLを生成したかったのです。多くの検索を行った後、実際にはブラウザによって制御されていることがわかりました。 chromeで、新しく開いたページがポップアップとして開き、ポップアップブロッカーによってブロックされます。アプリケーションのほとんどのユーザーはその動作に混乱していました。これが私たちが使用した回避策です。これがうまくいくことを願っています同様の問題を抱えている人を助けてください。

LandingPage.htmlというサイトにある実際のWebページを指す通常のリンクを作成できます。同じブラウザタブでウィンドウを開くには、ターゲットを「_blank」に設定する必要があります。

<a href="LandingPage.html" id="fakeLink" target="_blank">Click to open google in the same browser window</a>

次に、fakeLinkアンカー要素のクリックイベントにアタッチしました。

 $('#fakeLink').click(function(){
        $.ajax({
            url: ""
        }).done(function() {
            localStorage.setItem('url', 'https://www.google.lk');
        });
    });

Ajax呼び出しを実行し、動的に生成されたURLをサーバーから取得できます。次に、そのURLをlocalstorageに追加できます。

ランディングページには、すぐにリダイレクトされることをユーザーに示すテキストを含めることができます。 「1秒以内にGoogleにリダイレクトされます。」

ランディングページでは、settimeoutを設定でき、その関数内でwindow.locationを使用して、ユーザーを実際のページにリダイレクトできます。

 setTimeout(function(){
        window.location.assign(localStorage.getItem('url'));
    }, 1000);

これがお役に立てば幸いです。これはすべてのブラウザで機能するはずです。ブラウザに関連するものを使用していないため、IE 10およびChromeのみチェックインしました。

0
Nuwan