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>
Related
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>
Is it possible to execute inline JavaScript code on src attribute of an existing IFrame (function that do some logic and return an url ) ?
When I try the code, I get the error : Uncaught ReferenceError: hello is not defined
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript">
var hello = function(src1){
// some logic goes here
return "www.mysite.com";
}
</script>
</head>
<body>
<iframe width="400" height="400" src="javascript:hello()" >
</iframe>
</body>
</html>
The call to hello() is is executing inside the iframe ( because 'javascript:hello()' is the iframe SRC)
But the function 'hello()' is declared outside the iframe in the parent window, in which the iframe is embedded.
You can either call parent.hello() in your iframe src, or declare the body of hello() in the iframe src before calling hello(). The following demonstrates both methods :
<script>
var hello = function(){
alert('hello from outside the iframe');
}
</script>
<iframe width="400" height="400" src="javascript:var hello = function(){alert('hello from inside the iframe')};hello();parent.hello()"></iframe>
You can see it in action here:
https://fiddle.jshell.net/vtdc1qxf/3/
You can't put inline javascript in src attribute. You can use onload event for this. Use the code below
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript">
var hello = function(src1){
// some logic goes here
return "mysitename.com";
}
</script>
</head>
<body>
<iframe width="400" height="400" onload="this.src = hello()">
</iframe>
</body>
</html>
Hope this helps you
You could use document.write.
<body>
<script type="text/javascript">
document.write('<iframe width="400" height="400" src="' + hello() + '"></iframe>')
</script>
</body>
I just want to know how can I display an iframe on button click
Here is my code:
function postYourAdd () {
var iframe = $("#forPostyouradd");
iframe.attr("src", iframe.data("src"));
}
<button id="postYourAdd" onclick="postYourAdd()">Button</button>
<iframe id="forPostyouradd" data-src="http://www.w3schools.com" src="about:blank" width="200" height="200" style="background:#ffffff"></iframe>
At least in the Snippet you provided, you forgot to add a reference to JQuery. See it working now:
function postYourAdd () {
var iframe = $("#forPostyouradd");
iframe.attr("src", iframe.data("src"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="postYourAdd" onclick="postYourAdd()">OPEN</button>
<iframe id="forPostyouradd" data-src="http://www.w3schools.com" src="about:blank" width="500" height="200" style="background:#ffffff"></iframe>
<body>
<p>This is IFrame</p>
<button onclick="displayIframe()">Click me</button>
<div id="iframeDisplay"></div>
<script>
function displayIframe() {
document.getElementById("iframeDisplay").innerHTML = "<iframe src=\"../HtmlPage1.html\" height=\"200\" width=\"300\" ></iframe>";
}
</script>
</body>
function postYourAdd () {
var iframe = $("#forPostyouradd");
iframe.attr("src", iframe.data("https://www.google.com/"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="postYourAdd" onclick="postYourAdd()">OPEN</button>
<iframe id="forPostyouradd" data-src="http://www.w3schools.com" src="about:blank" width="500" height="200" style="background:#ffffff"></iframe>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<button id="postYourAdd" onclick="light()">OPEN</button>
<iframe id="forPostyouradd" src="" title="W3Schools Free Online Web Tutorials">
</iframe>
<script>
function light() {
var iframe = $("#forPostyouradd");
debugger;
iframe.attr("src", "https://www.w3schools.com/java/default.asp");
}
</script>
</body>
</html>
I am working on a website in which i need get content from iframe.
code is here.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-lates…
</head>
<body>
<iframe src="http://glimmertech.org/IF222.htm" width="80%" height="600" id="frameDemo"> </iframe>
<script>
var myFrame = $('#frameDemo');
myFrame.load(function()
{
var myjQueryObject = $('#frameDemo').contents().find('#newid'…
alert(myjQueryObject[0].innerHTML);
});
</script>
</body>
</html>
Try this:
var myIframe = document.getElementById('frameDemo');
var myObject = myIframe.contentWindow.document.getElementById('newid');
alert(myObject.innerHTML);
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>