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>
Related
I'm having an auto-generated iframe (Which also have a class name and on the same domain), inside it, there is also a <script> tag and some styling. Can anyone tell me how to remove the script tag and its contents using pure javascript? [NO jQuery please, Using VueJS ]
<html>
<body>
<iframe src="#" class="myiframe">
#document
<html>
<body>
<!-- REMOVE-->
<style>...</style>
<!-- REMOVE-->
<div class="wrapper">...</div>
</body>
</html>
</iframe>
</body>
</html>
I know how to select the script tag (Might not perfect for the purpose), What I don't know is how to select the style tag which is inside of an iframe:
var element = document.getElementsByTagName("style"), index;
for (index = element.length - 1; index >= 0; index--) {
element[index].parentNode.removeChild(element[index]);
}
You can try to use the following code, this code might be lengthy, lets try and optimize that:
<html>
<head>
<script>
function removeStyleTag() {
var iframe = document.getElementById("myFrame");
var styleTag = iframe.contentWindow.document.getElementsByTagName("style");
for (var index = styleTag.length - 1; index >= 0; index--) {
styleTag[index].parentNode.removeChild(styleTag[index]);
}
}
</script>
</head>
<body>
<iframe id="myFrame" src="#" class="myiframe">
#document
<html>
<body>
<!-- REMOVE-->
<style>...</style>
<!-- REMOVE-->
<div class="wrapper">...</div>
</body>
</html>
</iframe>
<button onclick="removeStyleTag()">Try It</button>
</body>
</html>
I have found a reference from this link.
I have just added the following 2 lines in addition to the code that you have written:
var iframe = document.getElementById("myFrame");
var styleTag = iframe.contentWindow.document.getElementsByTagName("style");
Here is a link to Fiddle where I have tried this code.
I have a problem that some link we show is separeted from the rest of the page itself, so the link showes up immediatly as you open the page but the page takes 2-3 seconds to load, I'm trying to delay the link (in this example it's google) so it will show up a few seconds after the page is loaded.
am I getting close?
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show(), 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com;
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<style>
#Link{display:none;}
</style>
<body window.onLoad="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</div>
</body>
</html>
You have a few errors in your page which is stopping this from working:
Usually the first thing to check when something is not working is the browser console (press F12) and looks for errors. This won't fix problems with logic but should put you in a good position to start debugging things.
You have a missing " syntax error in exportSrc - this will show in the browser console
The load attribute in the body is incorrect. You should just use onload="myFunction()"
Your setTimeout is calling show instead of referencing it. Remove the ()s.
Put the <style> tags inside the <head>
You have an extra </div> tag
This should work better:
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<style>
#Link{display:none;}
</style>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show, 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com";
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<body onload="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</body>
</html>
Try
<body onLoad="myFunction();">
Instead of window.onLoad
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>
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).