Unable to set srcdoc value using jquery

Question

What I'm trying to do here is dynamically add and display content as HTML inside an iframe by using jquery to set the srcdoc attribute on the click of a button. Nothing happens though when I click on the button:

Strangely enough, when I replace $("#myFrame").srcdoc with document.getElementById("myFrame) the code works as intended. That further baffles me.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
    
    <head>
        
        <meta charset="utf-8">
        
        <title> Jquery Project - Practice </title>
        
        <script type = "text/javascript" src ="jquery-3.4.1.min.js"> </script>
        
        <link href="jquery-ui/jquery-ui.css" rel ="stylesheet">
        
        <script src = "jquery-ui/jquery-ui.js"> </script>
        
        <style type="text/css">
            
            html, body {
                font-family:Helvetica, sans-serif;
                margin:0px;
                padding:0px;
                height:100%;
                width:100%;
            }
            
            div, textarea {
                margin:0px;
                padding:0px;
            }
            
            * {
                margin:0px;
                padding:0px;
            }
            
            #divOne {
                width:100%;
                height:100%;
                background-color:aliceblue;
            }
             
        </style>
             
    </head>
    
    <body> 
        
        <div id="divOne">
            
            <iframe id ="myFrame"></iframe>
            
            <button id = "click"> Click Me! </button>
            
        </div>
        
        <script type ="text/javascript">
            
            
            $(document).ready(function() {
                
                $("#myFrame").css({
                    "height":"300px",
                    "width":"300px",
                    "margin":"200px",
                    "background-color":"bisque"
                });
                
                $("#click").click(function() {
                    
                    $("#myFrame").srcdoc = "<p>Hello World!</p>" ;
                    //alert("clicked");
                
                });
                
            });
                
                   
        </script>
        
    </body>

</html>

Anurag Srivastava · Accepted Answer

Set it by using .attr()

$(document).ready(function() {

  $("#myFrame").css({
    "height": "300px",
    "width": "300px",
    "margin": "200px",
    "background-color": "bisque"
  });

  $("#click").click(function() {
    $("#myFrame").attr("srcdoc", "<p>Hello World!</p>");
  });
  
});

html,
body {
  font-family: Helvetica, sans-serif;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}

div,
textarea {
  margin: 0px;
  padding: 0px;
}

* {
  margin: 0px;
  padding: 0px;
}

#divOne {
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divOne">
  <iframe id="myFrame"></iframe>
  <button id="click"> Click Me! </button>
</div>

Unable to set <iframe> srcdoc value using jquery

Tags:

javascript

html

jquery

Pradyut Vatsa

1 Answers

Anurag Srivastava

Recent Activity

Donate For Us