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...
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>
I think the below code helps you. You need to change
$('.iframeload')
To
$('#iframeload')
because you're using element ID not class
the complete code is below
$('#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
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<button id="iframeload">Load Iframe</button>
<div id="iframe_content"></div>
The above code does not work because of the API
<!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>
Related
I want to disable right click on iframe but my code is not working. any fix for this code or any alternate to disable right click on iframe pdf?
<html>
<head>
<title>Disable Context Menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/jscript">
$('#myiframe').bind('contextmenu', function(e) {
return false;
});
</script>
</head>
<body >
<iframe id="myiframe" src="dummy1.pdf" width="528" height="473"
></iframe>
</body>
</html>
<script type="text/javascript">
$('#myiframe').on('contextmenu', function() {
return false;
});
</script>
Also, try using the latest version of jQuery. The latest version of jQuery is 3.5.1.
Please go thorough below HTML files code. Here I am trying to use toggle function of jQuery. Here my toggle for "content.HTML" page is working perfectly. I need to hide the "topFrame" Completely when I click on any image or button and unhide it when I click on it again.
Please help me where I've made mistake. I've tried a lot to accomplish this but I am not able to do.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frameset Example Title (Replace this section with your own title)</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<frameset rows="10%,90%" border="0" name="FrameName">
<frame name="topFrame" src="menu_1.html" target="right"></frame>
<frame name="menu" src="content.html" target="_self"></frame>
<noframes>
//....
</noframes>
</frameset>
<script>
$(document).ready(function(){
$("button").click(function(){
$('frame[name="topFrame"]').fadeToggle("slow");
$("#top").toggle();
});
});
</script>
</html>
content.html
<html>
<head>
<title>HTML Frames Example - Content</title>
<style type="text/css">
body {
font-family:verdana,arial,sans-serif;
font-size:10pt;
margin:30px;
background-color:#ffcc00;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<h1>Content</h1>
<br>
<button id="button1">Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$('button').on('click',function(){
$( "p" ).toggle( "slow" );
$( "h1" ).toggle( "slow" );
});
</script>
</body>
</html>
menu_1.html
<html>
<head>
<title>HTML Frames Example - Menu 1</title>
<style type="text/css">
body {
font-family:verdana,arial,sans-serif;
font-size:10pt;
margin:10px;
background-color:#ff9900;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function(){
$('img, button').on("click" , function (e) {
$('p').toggle();
});
});
</script>
</head>
<body>
<h3>Menu 1</h3>
<p>White Page</p>
</body>
</html>
Here you have toggle button in content frame and want to hide menu frame onclick of toggle button.
Problem is you cannot access javascript function present in parent from child frame, hence need to do some work-around like below :
Add a event listener in parent and call toggle frame function (frame cannot be hide or show directly using display property of css, hence added two seperate function) :
........
<frameset rows="10%,90%" border="0" name="FrameName">
<frame name="topFrame" src="menu_1.html" target="right"></frame>
<frame name="menu" src="content.html" target="_self"></frame>
<noframes>
//....
</noframes>
</frameset>
<script>
var origCols = null;
function receiveMessage(event)
{
if(origCols!=null)
showFrame()
else
hideFrame();
}
addEventListener("message", receiveMessage, false);
function hideFrame() {
var frameset = document.getElementById("frameSet");
origCols = frameset.rows;
frameset.rows = "0, *";
}
function showFrame() {
document.getElementById("frameSet").rows = origCols;
origCols = null;
}
</script>
</html>
And now write onclick of button like below :
<button id="button1" onclick="parent.postMessage('button1 clicked', '*');">
Toggle 'em</button>
Try using IDs
Here's a short example..
<div><a id="thumbnail">Click here to Show/Hide Thumbnail</a></div>
<div id="showhide"> Your Content to hide or show </div>
<script type="text/javascript">
$('#thumbnail').click(function() {
$('#showhide').toggle();
});
</script>
The following script is not working when i upload it to my webpage. It works fine and loads the url if I try it on 'TryIt Editor' in w3school.com. I have changed the domain name in this example.
<!DOCTYPE html>
<html>
<body>
<script type='text/javascript'>
var x=1;
function changeLink()
{
x=x+1;
var y="http://example.com/basicone/image"+x+".html";
document.getElementById('iframe-a').src=y;
}
</script>
<iframe id="iframe-a" seamless src="http://example.com/basicone/image1.html" height="450" width="1000" scrolling="no"></iframe>
<button id="button" onclick="changeLink()">Next</button>
</body>
</html>
Are you sure it doesn't works? It's really strange, especially because js it's clientside
try to change alert the url, after it has been changed, with this code:
<script>
var x=1;
function changeLink()
{
x=x+1;
var y="http://example.com/basicone/image"+x+".html";
document.getElementById('iframe-a').src=y;
alert(document.getElementById('iframe-a').src);
}
</script>
<iframe id="iframe-a" seamless src="http://example.com/basicone/image1.html" height="450" width="1000" scrolling="no"></iframe>
<button id="button" onclick="changeLink()">Next</button>
This question already has answers here:
Get current URL from IFRAME
(8 answers)
Closed 9 years ago.
this is the code im using.............
i want to get current url(href) from below code ...............
<html>
<head>
<script type="text/javascript">
function load() {
var url = document.getElementById("iframeid");
//get the ifram onload url of href
//(i.e) http://www.image.com/home.html
}
</script>
</head>
<body>
<iframe onload="load()" name="Google" id="iframeid" scrolling="auto" style="width:95%;height:600px" src="http://www.image.com" >
</iframe>
</body>
</html>
This will work only if they are in the same domain,protocol and port:
document.getElementById("iframe_id").contentWindow.location.href
else use :
document.getElementById("iframe_id").src
The demo.
<html>
<head>
<script type="text/javascript">
function load(frame) {
console.log(frame.src);
}
</script>
</head>
<body>
<iframe onload="load(this)" name="Google" id="iframeid" scrolling="auto" style="width:95%;height:600px" src="http://www.image.com" >
</iframe>
</body>
</html>
Try this:
document.getElementById("iframeid").src;
try this. Sometimes you can't acess the Iframe url
var CurrentUrl = document.getElementById('MyIFrame').contentWindow. location.href;
Only two missing bits (marked with <== )
<html>
<head>
<script type="text/javascript">
function load() {
var url = document.getElementById("iframeid").src; // <== .src
//get the ifram onload url of href
//(i.e) http://www.image.com/home.html
}
</script>
</head>
<body>
<iframe onload="load()" name="Google" id="iframeid" scrolling="auto" style="width:95%;height:600px" src="http://www.image.com" > // <== Opening angle bracket
</iframe>
</body>
</html>
I have an Iframe.html file :
<body onload="alert('frame 1 loaded');">
<div> This is frame 1 content </div>
<a id="a1" href="Sample.html"> click</a>
</body>
Sample.html
<body>
<ul id="list1">
<li name="one">one</li>
<li name="two">two</li>
</ul>
And I calling the iframe form test.html file :
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var i=10;
$("#frame1").ready(function () {
$('#frame1').contents().find('#a1').click(function() {
alert("Hello");
$('#frame1').attr('src', $('#frame1').contents().find('#a1').attr("href"));
$('#frame1').load();
});
$('#frame1').contents().find('#a1').click();
</script>
</head>
<body onload="handleMainOnload();">
<!--iframe id="frame1" src="about:blank"/-->
<iframe id="frame1" src="iframe.html"/>
</body>
Now I tried using the content of URL loaded in iframe i.e. Sample.html in test.html as follows :
$('#frame1').contents().find('#list1 li[name=one]').click(function() {
alert(" Clicking list....");
});
$('#frame1').contents().find('#list1 li[name=one]').click();
But this doesn't work.. Can you please tell me From Test.html how to access Sample.html file content like(id,name,class etc.) which is loaded in iframe.html using JQuery.
Please help.
Thanks
Kamakshi
To access any document inside an iframe included inside an HTML take for example the following page:
<html>
....
<body>
<iframe id='myFrame' name='myFrame' src='someUrl'>
</body>
</html>
You can access using the following script
myFrame.document.getElementById('elementID');
Make sure you provide a name (here: myFrame) that is used to access the frame itself.
The elementID is the id of any element inside the html/url loaded inside the iframe
<html>
<head>
<title>Main Frame 2 Title </title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
------
------
alert("frame ready");
var $value1 = $frame.contents().find('#list1 li[name=one]').html() ;
alert("loaded + " + $value1);
$frame.contents().find('#list1 li[name=one]').click(function() {
alert("About + clicked");
});
$frame.contents().find('#list1 li[name=one]').click();
}); });
</script>
</head>
<body>
<iframe id="frame1" src="sample.html" />
This works fine, if i am giving iframe src=sample.html directly instead of redirecting using another file (i.e. src=iframe.html) and keeping Sample.html in same domain as parent file (test.html).