CODEWITHSUNDEEP
javascriptjqueryhtmlajaxiframe
boniq
boniq

Reputation: 21

How to load iFrame in div by AJAX

I want load an iFrame in my div by AJAX. How can I do it?

<button id="iframeload">Load Iframe</button>
<div id="iframe_content"></div>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript">
    $('.iframeload').click(function(event) {
      event.preventDefault();
      event.stopImmediatePropagation();
      $.ajax({
          type: "POST", 
          url : "https://pecom.ru/ru/calc/?iframe=Y",
          success : function (data) {  
              // alert('ok');
              $("#iframe_content").html(data); 
          }
      });
  });
</script>

This is the iFrame

<iframe id="pecom-kabinet-iframe" allowtransparency="true" frameborder="0" width="800" height="1800" scrolling="auto" style="border: 0;" src="https://pecom.ru/ru/calc/?iframe=Y">Not supported browser< / iframe >

ANd the button #iframeload does not work...

Upvotes: 2

Views: 22178

Answers (2)

Vito Santimone
Vito Santimone

Reputation: 55

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('#iframe').attr('src', 'https://www.qries.com');
});
</script>
</head>
<body>

<iframe id="iframe" name="myIframe" frameborder="5" width="500" height="300"></iframe>

</body>
</html>

Upvotes: 1

toffler
toffler

Reputation: 1233

First Error

You are using elements class, not it's id in your code:

<button id="iframeload">
$('.iframeload').click(function(event) {

Second Error

Looks like you want your ajax call to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons.

Possible Solution

However, if you just want to display the iframe content on button click, there is no need for ajax.

just use attr('scr',url)

$( document ).ready(function() {

  $('#iframeload').on('click',function(event){
    event.preventDefault();
    event.stopImmediatePropagation();
    
    var url = 'https://pecom.ru/ru/calc/?iframe=Y';
    
    $('#abc_frame').attr('src', url);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<button id="iframeload">Load Iframe</button>
<div id="iframe_content">
  <iframe name="abc_frame" id="abc_frame" src="about:blank" frameborder="0" scrolling="no"></iframe>
</div>

Upvotes: 1

Related Questions