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=".12.4.min.js"></script>
<script type="text/javascript">
$('.iframeload').click(function(event) {
event.preventDefault();
event.stopImmediatePropagation();
$.ajax({
type: "POST",
url : "/?iframe=Y",
success : function (data) {
// alert('ok');
$("#iframe_content").html(data);
}
});
});
</script>
This is the iFrame
<iframe id="pe-kabinet-iframe" allowtransparency="true" frameborder="0" width="800" height="1800" scrolling="auto" style="border: 0;" src="/?iframe=Y">Not supported browser< / iframe >
ANd the button #iframeload does not work...
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./jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$('.iframeload').click(function(event) {
event.preventDefault();
event.stopImmediatePropagation();
$.ajax({
type: "POST",
url : "https://pe.ru/ru/calc/?iframe=Y",
success : function (data) {
// alert('ok');
$("#iframe_content").html(data);
}
});
});
</script>
This is the iFrame
<iframe id="pe-kabinet-iframe" allowtransparency="true" frameborder="0" width="800" height="1800" scrolling="auto" style="border: 0;" src="https://pe.ru/ru/calc/?iframe=Y">Not supported browser< / iframe >
ANd the button #iframeload does not work...
- Why an iframe? Could you not use a div and just append the response to that? – Benjamin James Kippax Commented Jul 4, 2018 at 11:42
2 Answers
Reset to default 1First 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://pe.ru/ru/calc/?iframe=Y';
$('#abc_frame').attr('src', url);
});
});<script src="https://ajax.googleapis./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><!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#iframe').attr('src', 'https://www.qries.');
});
</script>
</head>
<body>
<iframe id="iframe" name="myIframe" frameborder="5" width="500" height="300"></iframe>
</body>
</html>