Javascript 将链接按钮加载到iframe 100%_Javascript_Jquery_Html_Iframe

Javascript 将链接按钮加载到iframe 100%

javascript jquery html iframe

Javascript 将链接按钮加载到iframe 100%,javascript,jquery,html,iframe,Javascript,Jquery,Html,Iframe,我有一个网站，显示一个登录页，并有一个行动按钮，比如说“下载” 我想，当点击下载时，url的内容完全加载到我的页面上，在iframe中，我如何做到这一点？我一直在找，但没有找到确切的答案我想要实现的是，外部链接完全加载到我的网站上多谢各位编辑：消息正文{margin:0；padding:0；背景：#eee}。容器{top:30%；left:50%；width:30em；margin top:-9em；margin left:-15em；边框：1px实心#7498b8；背景色：#9ec

我有一个网站，显示一个登录页，并有一个行动按钮，比如说“下载”

我想，当点击下载时，url的内容完全加载到我的页面上，在iframe中，我如何做到这一点？我一直在找，但没有找到确切的答案

我想要实现的是，外部链接完全加载到我的网站上

多谢各位

编辑：


消息
正文{margin:0；padding:0；背景：#eee}。容器{top:30%；left:50%；width:30em；margin top:-9em；margin left:-15em；边框：1px实心#7498b8；背景色：#9ec6ea；位置：固定；padding:5px；字体系列：arial；边框半径：2px}。标题{color:#162c41；文本对齐：中心；padding:10px 0；位置：相对}。关闭{位置：绝对；顶部：-6px；右侧：1px；背景：#b90909；高度：30px；宽度：40px；颜色：#fff；线条高度：30px；垂直对齐：中间；边框半径：02px 2px}。关闭a{颜色：白色；文本装饰：无}。内部{边框：1px实心#8fa5bc；边框底部：0；背景：#fff；最小高度：150px；文本对齐：左侧；填充：20px}。内部img{浮动：左侧；边距：0 10px 0；宽度：25px；高度：25px}.h1{边框底部：1px实心#f1f1f1；填充底部：10px；高度：25px；线条高度：25px；垂直对齐：中间}。详细信息{边距：10px 0 10px；边框底部：1px实心#f1f1f1f1；填充底部：10px}。底部{背景：f0f0f0f0f0；边框：1px实心35a0；高度：10px实心35a0；文本：右对齐}a、 secure，a.secureclose{float:right；文本对齐：中心；高度：25px；宽度：110px；边框：1px实心#adadad；背景：e7e7e7；颜色：333；文本装饰：无；页边距顶部：5px；线条高度：25px；垂直对齐：中间；字体大小：20px；方框阴影：1px 1px 1px#f8f8}a.secureclose{宽度：85px；边框：1px实心#678db4；左边距：10px；方框阴影：插入1px 1px#c9f9ff}a.安全：悬停{背景：#e1e1e1e1}
标题

试试下面的方法

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

foo

不必是iframe，它也可以与div一起工作（并解决一些显示问题）。

试试类似的方法

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

foo

不必是iframe，它也可以与div一起工作（并解决一些显示问题）。

您应该能够在没有Javascript的情况下完成这项工作

假设您的页面上有一个iframe：

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

此函数可能更复杂，例如，如果默认或实际隐藏帧，则取消隐藏帧

然后，您可以从按钮、div或以下任何元素调用它：

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

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


下载内容：
加载网站：

您应该能够在没有Javascript的情况下完成这项工作

假设您的页面上有一个iframe：

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

此函数可能更复杂，例如，如果默认或实际隐藏帧，则取消隐藏帧

然后，您可以从按钮、div或以下任何元素调用它：

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

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


下载内容：
加载网站：

如评论所述：“我希望我粘贴在代码主体中的代码默认加载到iframe中，然后当用户单击iframe中的“下载”按钮时，将外部url加载到同一iframe中。因此，它在顶部共享同一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>


消息
正文{margin:0；padding:0；背景：#eee}。容器{top:30%；left:50%；width:30em；margin top:-9em；margin left:-15em；边框：1px实心#7498b8；背景色：#9ec6ea；位置：固定；padding:5px；字体系列：arial；边框半径：2px}。标题{color:#162c41；文本对齐：中心；padding:10px 0；位置：相对}。关闭{位置：绝对；顶部：-6px；右侧：1px；背景：#b90909；高度：30px；宽度：40px；颜色：#fff；线条高度：30px；垂直对齐：中间；边框半径：02px 2px}。关闭a{颜色：白色；文本装饰：无}。内部{边框：1px实心#8fa5bc；边框底部：0；背景：#fff；最小高度：150px；文本对齐：左侧；填充：20px}。内部img{浮动：左侧；边距：0 10px 0；宽度：25px；高度：25px}.h1{边框底部：1px实心#f1f1f1；填充底部：10px；高度：25px；线条高度：25px；垂直对齐：中间}。详细信息{边距：10px 0 10px；边框底部：1px实心#f1f1f1f1；填充底部：10px}。底部{背景：f0f0f0f0f0；边框：1px实心35a0；高度：10px实心35a0；文本：右对齐}a、 secure，a.secureclose{float:right；文本对齐：中心；高度：25px；宽度：110px；边框：1px实心#adadad；背景：e7e7e7；颜色：333；文本装饰：无；页边距顶部：5px；线条高度：25px；垂直对齐：中间；字体大小：20px；方框阴影：1px 1px 1px#f8f8}a.secureclose{宽度：85px；边框：1px实心#678db4；左边距：10px；方框阴影：插入1px 1px#c9f9ff}a.安全：悬停{背景：#e1e1e1e1}
标题

请注意，我删除了target=“\u blank”，因为它会在一个新窗口中打开。还请注意，我没有使用target=“foo”，因为页面已加载到foo中。

如注释所示：“我希望粘贴在代码主体中的代码默认加载到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>


消息
正文{margin:0；padding:0；背景：#eee}。容器{top:30%；left:50%；width:30em；margin top:-9em；margin left:-15em；边框：1px实心#7498b8；背景色：#9ec6ea；位置：固定；padding:5px；字体系列：arial；边框半径：2px}。标题{color:#162c41；文本对齐：中心；padding:10px 0；位置：相对}。关闭{位置：绝对；顶部：-6px；右侧：1px；背景：#b90909；高度：30px；宽度：40px；颜色：#fff；线条高度：30px；垂直对齐：中间；边框半径：0 0 2px 2px}。关闭a{颜色：白色；文本装饰：无}。内部{边框：1px实心#8fa5bc