1. ホーム
  2. 質問と答え
  3. 負荷リンクボタンはiframeに100％

負荷リンクボタンはiframeに100％

2017-03-09 3 views
0

私はランディングページが表示され、アクションボタンへの呼び出しを持っているウェブサイトを持っている、のは、ダウンロードをクリックしたときに、URLの内容がロードされていることを私はしたい負荷リンクボタンはiframeに100％

を「ダウンロード」しましょう完全に私のページに、iframeで、私はこれをどのようにすることができますか？私は検索してきましたが、正確にこれを見つけることはありません。

私が達成したいことは、外部リンクが自分のウェブサイトに完全に読み込まれることです。

ありがとうございました。

編集：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<base href="."> 
<title>Message</title> 
<meta name="robots" content="noindex,nofollow"> 
<style type="text/css"> body{margin:0;padding:0;background:#eee}.container{top:30%;left:50%;width:30em;margin-top:-9em;margin-left:-15em;border:1px solid #7498b8;background-color:#9ec6ea;position:fixed;padding:5px;font-family:arial;border-radius:2px}.title{color:#162c41;text-align:center;padding:10px 0;position:relative}.close{position:absolute;top:-6px;right:1px;background:#b90909;height:30px;width:40px;color:#fff;line-height:30px;vertical-align:middle;border-radius:0 0 2px 2px}.close a{color:white;text-decoration:none}.inner{border:1px solid #8fa5bc;border-bottom:0;background:#FFF;min-height:150px;text-align:left;padding:20px}.inner img{float:left;margin:0 10px 0 0;width:25px;height:25px}.h1{border-bottom:1px solid #f1f1f1;padding-bottom:10px;height:25px;line-height:25px;vertical-align:middle}.details{margin:10px 0 10px;border-bottom:1px solid #f1f1f1;padding-bottom:10px}.bottom{background:#f0f0f0;border:1px solid #a0a0a0;height:36px;padding:10px;text-align:right}a.secure,a.secureclose{float:right;text-align:center;height:25px;width:110px;border:1px solid #adadad;background:#e7e7e7;color:#333;text-decoration:none;margin-top:5px;line-height:25px;vertical-align:middle;font-size:20px;box-shadow:1px 1px 1px #f8f8f8}a.secureclose{width:85px;border:1px solid #678db4;margin-left:10px;box-shadow:inset 1px 1px 1px #c9f9ff}a.secure:hover{background:#e1e1e1} </style> 


    </head> 


<body> 




<div class="container"> 
    <div class="title">title<div class="close">x</div> 
    </div> 

    <div class="bottom"><a href="www.bing.com" id="burl" rel="noreferrer" target="_blank" class="secure"><b>download</b></a> </div> 




</div> 


</body></html>

出典

2017-03-09 gasguirre

答えて

1

コメントごとに：「コードの本体の中に貼り付けたコードをiframe内にデフォルトで読み込み、iframe内の「ダウンロード」ボタンをクリックして同じiframe内に外部URLがあるため、すべてが同じURLを共有しています。

次に、簡単です。

はこの内容でindex.htmlをと呼ばれる一つのファイルがいる：

<!DOCTYPE html> 
<html> 
    <head></head> 
    <body> 
     <iframe name="foo" src="frame.html" style="width: 100%; border: 0; height: 500px"></iframe> 
    </body> 
</html>

次に、あなたのframe.htmlはデフォルトのコンテンツになりますが、言う：私はターゲットを削除した

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>Message</title> 
    <meta name="robots" content="noindex,nofollow"> 
    <style type="text/css"> body{margin:0;padding:0;background:#eee}.container{top:30%;left:50%;width:30em;margin-top:-9em;margin-left:-15em;border:1px solid #7498b8;background-color:#9ec6ea;position:fixed;padding:5px;font-family:arial;border-radius:2px}.title{color:#162c41;text-align:center;padding:10px 0;position:relative}.close{position:absolute;top:-6px;right:1px;background:#b90909;height:30px;width:40px;color:#fff;line-height:30px;vertical-align:middle;border-radius:0 0 2px 2px}.close a{color:white;text-decoration:none}.inner{border:1px solid #8fa5bc;border-bottom:0;background:#FFF;min-height:150px;text-align:left;padding:20px}.inner img{float:left;margin:0 10px 0 0;width:25px;height:25px}.h1{border-bottom:1px solid #f1f1f1;padding-bottom:10px;height:25px;line-height:25px;vertical-align:middle}.details{margin:10px 0 10px;border-bottom:1px solid #f1f1f1;padding-bottom:10px}.bottom{background:#f0f0f0;border:1px solid #a0a0a0;height:36px;padding:10px;text-align:right}a.secure,a.secureclose{float:right;text-align:center;height:25px;width:110px;border:1px solid #adadad;background:#e7e7e7;color:#333;text-decoration:none;margin-top:5px;line-height:25px;vertical-align:middle;font-size:20px;box-shadow:1px 1px 1px #f8f8f8}a.secureclose{width:85px;border:1px solid #678db4;margin-left:10px;box-shadow:inset 1px 1px 1px #c9f9ff}a.secure:hover{background:#e1e1e1} 
    </style> 
</head> 

<body> 
<div class="container"> 
    <div class="title">title<div class="close">x</div> 
    <div class="bottom"> 
    <a href="www.bing.com" class="secure">download</a> 
    </div> 
</div> 
</body> 
</html>

注= "_blank"は新しいウィンドウで開きます。また、ページが既にfooの中に読み込まれているので、私はtarget = "foo"を使用していないことに注意してください。

出典

2017-03-09 14:55:08 nitobuendia

+0

これは完全に動作させました、ありがとう！ – gasguirre

+0

喜んで:) – nitobuendia

0

が

<iframe id="foo"></iframe>

ような何かそして、いくつかのjQueryを試してみてください：

$("#downloadButton").click(function() { 
    $.get('http://thewebsite.com', {}, function(data) { 
     $("#foo").html(data); 
    }); 
});

fooはインラインフレームである必要はありません、それはdiv要素で動作しますまた、いくつかの表示上の問題を解決します。

出典

2017-03-09 13:14:58

+2

クリックするだけで、iframeにsrcを渡します。なぜajaxコールですか？ – Shubham

+0

これはどうですか？ 私はウェブサイトのコードを追加しました – gasguirre

2

これはJavascriptなしで実行できるはずです。

<a href="fileToLoadinIframe" target="foo">Download</a>

target作品はfileToLoadinIframeはインラインフレーム内にロードすべきであると判断したものです：あなたがリンクを作る、今

<iframe name="foo"></iframe>

：

はあなたのページ上のiframeを持っていると言います。それはあなたは、あなたがそれを行うためにJavaScriptでそれをしたい場合、たとえば、あなたは別のタイプの要素をクリックすると、HTMLページやPDFファイル、または画像...

今

可能性があり

<iframe id="foo" name="foo"></iframe>

iframeのsrc属性を変更する必要があります。

var loadFrame = function(url) { 
    document.getElementById('foo').setAttribute('src', url); 
}

この機能は、それがデフォルトまたは実際dynamically creating the iframeによって隠されていた場合、フレームを再表示、のような、より複雑になることがあります。その後

あなたはdivの、あなたのボタンから呼び出す、など何でも要素できるが、以下：

iframe { 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 

 
a { 
 
    background-color: #3F51B5; 
 
    border: 1px solid #1A237E; 
 
    color: #FFF; 
 
    display: inline-block; 
 
    padding: 5px 1em; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head></head> 
 
<body> 
 

 
Downloaded content: 
 
    <iframe name="foo"></iframe> 
 

 

 
Load websites: 
 
<a href="http://pokedream.com/" target="foo">Open PokeDream</a> 
 
<a href="https://www.youtube.com/embed/t2ByLmLnYJ8" target="foo">Open YT Video</a> 
 
</body> 
 
</html>

I：

<button onclick="loadFrame('fileToLoadinIframe')">Download</button>

は実施例を参照してください。お役に立てれば。

出典

2017-03-09 13:35:05 nitobuendia

+0

私はjavascriptのない方法が好きですが、iframeの部分をうまく動作させるのに問題があります（上記のコードのiframe内にロードするにはどうすればいいですか？私は