CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Baldie47
Baldie47

Reputation: 1274

load link button into iframe 100%

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>

Upvotes: 0

Views: 577

Answers (3)

nitobuendia
nitobuendia

Reputation: 1248

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.

Upvotes: 1

nitobuendia
nitobuendia

Reputation: 1248

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.

Upvotes: 2

Grim...
Grim...

Reputation: 16953

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

Upvotes: 0

Related Questions