Здесь я пытаюсь динамически добавлять и отображать содержимое как HTML внутри iframe, используя jquery для установки атрибута srcdoc по нажатию кнопки. Ничего не происходит, хотя, когда я нажимаю на кнопку:
Как ни странно, когда я заменяю $("#myFrame").srcdoc на document.getElementById("myFrame), код работает как задумано. Это еще больше сбивает меня с толку.
<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>