Question

我有一个显示目标网页的网站，并有一个号召性用语按钮，让我们说＆＃34;下载＆＃34;

我希望在点击下载时，网址的内容完全加载到我的网页上，在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>

Answer 1

你应该能够在没有Javascript的情况下做到这一点。

假设您的网页上有iframe：

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

现在，您建立一个链接：

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

target部分决定了fileToLoadinIframe应该在iframe中加载。它可以是HTML页面或PDF文件，也可以是图像......

现在，如果你想用Javascript来做它，例如，当你点击另一种类型的元素时，你可以这样做：

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

您需要一个JS函数来更改iframe的src属性。

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

此功能可能更复杂，例如，如果框架默认隐藏或实际隐藏dynamically creating the iframe，则取消隐藏框架。

然后你可以从你的按钮，div或以下任何元素中调用它：

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

参见一个工作示例：

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>

我希望这会有所帮助。

Answer 2

根据评论：“我想要将我粘贴在我的代码正文中的代码，默认情况下在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>

请注意，我已删除了target =“_ blank”，因为它在新窗口中打开。另请注意，我没有使用target =“foo”，因为页面已经在foo中加载。

Answer 3

尝试类似

的内容

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

还有一些jQuery：

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

foo不必是iframe，它也适用于div（并解决一些显示问题）。

将链接按钮加载到iframe中100％

3 个答案: