2016-05-03 20 views
1

人が特定の場所に移動するために移動できるiframeがありますが、クロスドメインのようにサイト上のjavascriptの一部が機能しませんたとえば製品の履歴...)新しいタブでiframeソースを開く

私は、ユーザーがiframe内のどのページであっても、新しいタブでそのリンクを開くボタンを作る方法を見つけようとしています。

これが可能であれば、新しいタブのiframe内からリンクを開く人は、ではなく、であることがわかります。

ユーザーが現在iframe内のどのリンクでも新しいタブを開くボタンを作成する必要があります。

(おそらくひどい言い回しのために)何かを見つけることができないので、私は実際には多くのことを試していませんが、私の最高のチャンスはjquery/javascriptだと思っています。 javascript。

私の質問は、iframe URLを新しいタブに開くことができるかどうかです。もしそうなら、最も効果的な方法は何でしょうか?

iframe内のウェブサイトがドメイン間であり、そのソースを編集できません。

<iframe id="iframe" class="frame" name="iframe" height="100%" width="100%" onload="refreshLink(this.contentWindow.location.href)"></iframe> 

注:

は、私が現在持っていることはこれですSRCは、ページの読み込みではJavaScriptによって設定されています。

私が持っているの下で

:私が持っているすべての上記

       <script> 
           var hyperLink = document.getElementById("iframe").src; 

           function refreshLink(link) { 
            hyperLink = link; 
            document.getElementById("button").href=hyperLink; 
           } 
           </script> 

を:

<a href="#" target="_blank" class="btn btn-info" id="button">Open in R1</a> 

しかし、私は、任意の時点でボタンをクリックしたときには、同じURLに新しいタブを開きます私は以前(iframeが表示されている同じページに移動するタブ)でした。

答えて

3

私はこれは、あなたがこのようなもので、現在のサイトのURLを取得することができ、同じドメインのコンテンツを表示するアイフレームについては

ことが可能なはずであると信じて:

document.getElementById("myframeID").contentWindow.location.href 

しかし、クロスドメインのiframeのためにあなたが得ます

VM2536:2 Uncaught DOMException: Blocked a frame with origin "https://example.com" from accessing a cross-origin frame. 

しかし、これはクロスドメインのiframeから適切なURLを取得するために動作するようです:サイト上で同じように場所を取得しようとしたときにエラーを以下の

document.getElementById('myframeID').src 

あなたはこのような何かを行うことができますオフに終了するには(あなたがタグでのjQueryを使用と仮定した場合):

$('body').on('click','#button', function(){ 
    var url = document.getElementById('myframeID').src; 
    var tabOrWindow = window.open(url, '_blank'); 
    tabOrWindow.focus(); 
}); 
1

ここはスターターです。このようなマークアップ:

<iframe id="myIframe" src="http://yourwebsite.com"></iframe> 
<a href="#" target="_blank" id="button">Click here</a> 

スタートアンカーのhrefsrcに変更し、いくつかのJSを使用してiframe

var hyperLink = document.getElementById("myIframe").src; 
document.getElementById("button").href=hyperLink; 

は、あなたのiframeonload属性を追加します。

<iframe id="myIframe" src="http://yourwebsite.com" onload="refreshLink(this.contentWindow.location.href)"> 
</iframe> 

onload="refreshLink(this.contentWindow.location.href)"は、iframeの現在のURLを取得します。ナビゲートして、関数refreshLinkの引数として送信します。

その後、我々はその関数を宣言することができ、かつ完全なJSコードは次のようになります。

var hyperLink = document.getElementById("myIframe").src; 

function refreshLink(link) { 
    hyperLink = link; 
    document.getElementById("button").href=hyperLink; 
} 

これは動作しますが、それは、それぞれのウェブサイトは、アイフレームに関するおよびHTTP/HTTPSたどんな方針に従うのです。

+0

これは、バックストレートのiframeが表示されているURLに私を指すように見えますか? – GrumpyCrouton

+0

元のものを意味しますか?サーバー上でスクリプトをテストし、その時点でユーザーがiframe内のどこにでもリンクを更新します。 –

+0

私はおそらく何かが見当たりません。私の最初の投稿を見て、私のコードを見直すことはできますか? – GrumpyCrouton

関連する問題