Only Load Div Iframe Onclick

Only load div iframe onclick

Do you mean load the iframe inside the div only when an element is clicked? If so you can delete the iframe src attribute from the iframe tag and set the src only when the element is clicked.

On the iframe:

<iframe id='ifr' frameborder="0" scrolling="no" width="550" height="400">

On the clickable element:

onClick='document.getElementById("ifr").src="add_dossier.php";'

How to load a iframe only on button click

You can change the src attribute to a data-src, then when you click the button, set src to data-src

// Get the modalvar modal = document.getElementById('trailerdivbox');
// Get the button that opens the modalvar btn = document.getElementById("watchbutton");
var trailer = document.getElementById('trailervideo');
// When the user clicks the button, open the modal btn.onclick = function() {  modal.style.display = "block";  trailer.setAttribute('src', trailer.getAttribute('data-src'));}
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {  modal.style.display = "none";}
// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event) {  if (event.target == modal) {    modal.style.display = "none";  }}

/* Watch Trailer Button CSS */
#watchbutton {  background-color: #f2f2f2;  color: red;  font-weight: 600;  border: none;  /* This one removes the border of button */  padding: 10px 12px;}
#watchbutton:hover {  background-color: #e2e2e2;  cursor: pointer;}
#trailerdivbox {  display: none;  width: 100%;  height: 100%;  position: fixed;  overflow: auto;  /* Enable Scrolling */  background-color: rgb(0, 0, 0);  /* Fallback color */  background-color: rgba(0, 0, 0, 0.4);  /* Black w/ opacity */}
.videoWrapper {  position: relative;  padding-bottom: 56.25%;  /* 16:9 */  padding-top: 25px;  height: 0;}
.videoWrapper iframe {  position: absolute;  max-width: 560px;  max-height: 315px;  width: 95%;  height: 95%;  left: 0;  right: 0;  margin: auto;}

<button id="watchbutton">Watch Trailer ►</button>

<div id="close">  <div id="trailerdivbox">    <div class="videoWrapper">      <iframe id="trailervideo" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen></iframe>    </div>  </div></div>

How to only load iframe block when clicking on it?

Update

The snippet I provided was pretty simple, so I assume when you tested it, you either missed some of the code or placed things in the wrong order, or your site is interfering somehow.

So what I did was made the primary page (index.html) with everything it needs to function on it's own. I made a second page as well (target.html) which is the test page that resides in the iframe.

Here's the DEMO

---

Simplified your functions by:

• giving your popup an id #tgt
• removed that <link> element; it's not an anchor <a> it's basically for external stylesheets
• gave each anchor an empty href attribute
• placed e.preventDefault() in each click function to avoid the <a> default behavior of jumping to a location.
• replaced the iframe's src={..} template with the root, you can change that back, I just did that so the demo can function.

$(function() {  $("a.open").click(function(e) {      $('#tgt').fadeIn();      e.preventDefault();  });    $("a.close").click(function(e) {    $("#tgt").fadeOut();      e.preventDefault();  });});

.popup {  position: fixed;  display: none;  top: 0px;  left: 0px;  width: 100%;  height: 100%;}#displaybox {  width: 460px;  margin: 50px auto;  background-color: #000000;}.displaybox {  display: block;  position: relative;  overflow: hidden;  height: 800px;  width: 550px;}.displaybox iframe {  position: absolute;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" id="object" class="open" target="tgt">click link</a>

<div id="tgt" class="popup object">  <div id="displaybox"><a href="" class="close">X</a>    <br>    <div class="displaybox">      <iframe src="/" height="800" frameborder="0" width="550"></iframe>    </div>  </div>

onClick, load an iframe into a different div

You can remove the src attribute from the iframe tag and use the following:

<iframe id='someID' frameborder="0" scrolling="no" width="500" height="500">

And for the onClick, you can do something like this:

onClick='document.getElementById("someID").src="somepage.html";'

Hope this helps!

---

Related Topics