load link button into iframe 100%

Question

I have a website that shows a landing page and has a call to action button, let's say "download"

I want that when download is clicked the content of the url is loaded entirely on my page, in an iframe, how can I do this? I've been searching but not finding exactly this.

what I want to achieve is that the external link loads entirely on my website.

thank you.

Edit:

<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>

score 2 · Answer 1 · edited May 23 '17 at 11:46

2

You should be able to do this without Javascript.

Say you have an iframe on your page:

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

Now, you make a link:

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

The target piece is what determines that the fileToLoadinIframe should load inside the iframe. It could be an HTML page or a PDF file, or an image...

Now, if you want to do it with Javascript to do it, for example, when you click another type of element, you could do it like follows:

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

You need a JS function to change the src attribute of the iframe.

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

This function can be more complex, like, unhide the frame if it's hidden by default or actually dynamically creating the iframe.

Then you can call it from your button, div, or whatever element like follows:

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

See a working example:

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 hope this helps.

edited May 23 '17 at 11:46

Community

1
1

answered Mar 09 '17 at 13:35

nitobuendia

1,228
7
18

I like the method without javascript, but I'm having problems making it work, the iframe part, how do I make for my baste website (the code above) to load inside that iframe? I tried puttin all the body between the tags but is not working – Baldie47 Mar 09 '17 at 13:49
1

I have added a working example to my code. Press Run code snippet to see it working. – nitobuendia Mar 09 '17 at 14:39
I understand now, it's similar to what I need, but not entirely, I need for the whole website to be loaded by default in the iframe, being the iframe full page. and then being able to navigate to a link inside that iframe to another website, that also loads in the iframe – Baldie47 Mar 09 '17 at 14:41
I would want for the code I pasted inside the body of my code, to be loaded by default inside the iframe, then when user clicks on the "download" button inside the iframe, to load the external url inside the same iframe. so it all share the same url at the top – Baldie47 Mar 09 '17 at 14:45
That's slightly different, but let me add a new reply for this. Here it's been difficult. – nitobuendia Mar 09 '17 at 14:48

score 1 · Accepted Answer · answered Mar 09 '17 at 14:55

As per comment: "I would want for the code I pasted inside the body of my code, to be loaded by default inside the iframe, then when user clicks on the "download" button inside the iframe, to load the external url inside the same iframe. so it all share the same url at the top."

Then, it's easier.

Have one file called index.html with this content:

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

Then, your frame.html would be the default content, say:

<!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>

Note that I have removed target="_blank" because opens it in a new window. Also note that I am not using target="foo" as the page is already loaded inside foo.

score 0 · Answer 3 · answered Mar 09 '17 at 13:14

0

Try something like

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

And some jQuery:

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

foo doesn't have to be an iframe, it would work with a div, too (and solve some display problems).

answered Mar 09 '17 at 13:14

Grim...

16,518
7
45
61

2

On click just give src to iframe, why ajax call? – Shubham Mar 09 '17 at 13:17

load link button into iframe 100%

3 Answers3