Access JavaScript function in a programatically iFrame - javascript

I am trying to access a JavaScript function in a programatically created iFrame from a JavaScript function outside. I tried several ways, but was not successful. L ike window.frames['frameid'], etc.
Could you please provide me the correct syntax?

Yes, they are in the same domain. Actually, I am using ExtJS framework. I have a JSP inside an iFrame, I would like to call the javascript functions in the JSP from the a javascript function outside which is basically in a JS file.

Here's a more appropriate example based on your comments ;)
The main page
<html>
<head>
<title>Main Page</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
<script>
var receiver = {
listen:function(msg){
alert(msg);
}
};
</script>
</body>
</html>
The iframe page: iframe.html, but can be a JSP with similar output
<html>
<head>
<title>iframe page</title>
<script src="external.js"></script>
</head>
<body>
<!-- some content here -->
<script>
externalFunction('hello', window);
</script>
</body>
</html>
And the JS file: external.js
function externalFunction(msg, w){
w.parent.receiver.listen(msg);
}
Place those 3 files in the same directory and open the main page.
You should get a popup with "hello".

Related

Script tags - not linking (JS platform game)

I'm working through the 'create a platform game' project from Eloquent JavaScript and have an issue with script tags.
In the book we're told to display our level using:
<link rel="stylesheet" href="css/game.css">
<script>
var simpleLevel = new Level(simpleLevelPlan);
var display = new DOMDisplay(document.body, simpleLevel);
</script>
I've tried adding this (together with an additional script tag for my platform.js file) into index.html but the browser is giving nothing back, not sure what I'm doing wrong?
Ensure you are inserting your scripts in the right order:
<!DOCTYPE html>
<html>
<head>
Here you should put your "included" scripts with <script src=...>
</head>
<body>
...
</body>
<script>
Here you should put your first execution, if it needs the html page been completely loaded (as to use document.body).
</script>
</html>
The scripts are being executed as they appear into the page. If you use document, you have to delay the execution until the whole page has been loaded: Either by putting your script at the end of the HTML, either by putting an initialization function within the HEAD, and call it from body onload:
<head>
<script>
function myFunction(){...}
</script>
</head>
<body onload="return myFunction()">
...
</body>
Make sure to include the external JavaScript file you need in a separate <script> tag before your inline script!

Page not loading when loaded from an hlink?

I have made a page in javascript and calls a function in his onload, but that didn't called if its loaded from hlink, but call that function if reload the page, any help will be appreciated.
i have a function name loadbody in external Js file here is my function
function loadbody(){
alert("Get values from local storage");
}
i write this function in doument.ready() . here is my index page
<body onload="loadbody()">
<h1> this is phonegap indexpage </h1>
</body>
Just use a onclick event in hlink tag :)
here is your HTML page ::
<!DOCTYPE html>
<html>
<head>
<title>Js </title>
<script src="script.js"></script>
</head>
<body>
<h1> this is phonegap indexpage </h1>
<a href='http://www.google.com' onclick='loadbody();'>mylink</a>
</body>
</html>
Here is your external JS page ::
function loadbody(){
alert("Get values from local storage");
}

External JavaScript Not Running, does not write to document

I'm trying to use an external JavaScript file in order to write "Hello World" into a HTML page.
However for some reason it does not work, I tried the same function and commands inline and it worked, but not when it's using an external JavaScript file. The part I commented out in the JS file was the previous method I was trying to use. Those lines of could worked when I ran the script from the header, and inline. Thanks
Html file:
<html>
<head>
</head>
<body>
<p id="external">
<script type="text/javascript" src="hello.js">
externalFunction();
</script>
</p>
<script type="txt/javascript" src="hello.js"></script>
</body>
</html>
JavaScript file
function externalFunction()
{
var t2 = document.getElementById("external");
t2.innerHTML = "Hello World!!!"
/*document.getElementById("external").innerHTML =
"Hello World!!!";*/
}
In general, you want to place your JavaScript at the bottom of the page because it will normally reduce the display time of your page. You can find libraries imported in the header sometimes, but either way you need to declare your functions before you use them.
http://www.w3schools.com/js/js_whereto.asp
index.html
<!DOCTYPE html>
<html>
<head>
<!-- You could put this here and it would still work -->
<!-- But it is good practice to put it at the bottom -->
<!--<script src="hello.js"></script>-->
</head>
<body>
<p id="external">Hi</p>
<!-- This first -->
<script src="hello.js"></script>
<!-- Then you can call it -->
<script type="text/javascript">
externalFunction();
</script>
</body>
</html>
hello.js
function externalFunction() {
document.getElementById("external").innerHTML = "Hello World!!!";
}
Plunker here.
Hope this helps.
Script tags with SRC values do not run the contents. Split it to two script tags. One for the include, one for the function call. And make sure the include is before the call.
use onload eventListener to make it simple
<script>
window.onload = function() {
externalFunction();
}
</script>
You're trying to call the function before it has been loaded.
Place the load script above the declaration:
<html>
<head>
<script type="txt/javascript" src="hello.js"></script>
</head>
<body>
<p id="external">
<script type="text/javascript">
externalFunction();
</script>
</p>
</body>
</html>
Also you have a typo:
<script type="txt/javascript" src="hello.js"></script>
Should be:
<script type="text/javascript" src="hello.js"></script>
The script type needs to be "text/javascript" not "txt/javascript".

how to get content of div in a html from another html

I have two html file
a.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="content">
hello every one
</div>
</body>
</html>
and another page
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="result">
</div>
<iframe id="ifr" src="http://example.com/a.html">
</iframe>
<script type="text/javascript">
divv = $('#ifr').contents().find('div#content').clone();
$('#result').html(divv.html());
</script>
</body>
</html>
In second one I try to get first html and get contet div in it.after that I put this value to result div .
but It's not work. How can I do that.
You do not need to use an iframe; you can use ajax to do that. It's very straight forward.
$(function() {
$('#result').load('a.html #content',function()
$(this).html( $('#content').html() );
});
});
EDIT
As evident from comments below, scope of question has changed. The two pages are on different domains without CORS. Therefore the above answer would not work.
In order to use ajax, you may want to create a server-side script to act as a proxy. Then you'll call that script on your server and it will fetch the a.html page for you.
I guess that could be the right way.
var ifr = document.querySelector('#ifr');
var html = ifr.contentDocument.querySelector('div#content').innerHTML;
$('#result').html(html);

How to access a method of parent window of an Iframe [Chrome browser ]

I tried many times and many ways to call the method from inside the iframe while not yet successful to do so. please see below,
main.html : consisting the two iframe
iframe-1 linked with a index.html from where i want to call a method of main.html or want to change the src of second iframe.
main.html
<html>
<head> </head>
<body>
<iframe id="iframe-1" src="index.html"></iframe>
<iframe id="iframe-2" ></iframe>
</body>
</html>
index.html
<html> <head>
<script type="text/javascript">
$(document).ready(function(){
// How to access the method of main.html and change the iframe src
});
</script>
</head> <body>
......
</body> </html>
Note : tried parent.methodName(), window.parent.methodName() not working
#EDIT : success on IE & MOZILLA but getting error on Chrome ( Cannot call method 'getElementById' of undefined )
You should try with
document.getElementById("iframe-1").contentWindow.func();
or
var $f = $("#myIFrame");
var fd = $f[0].document || $f[0].contentWindow.document; // document of iframe
fd.MyFunction(); // run function
Docs
I am keeping this short.
As you are looking forward for the iframes/frames on same document[window sharing]. To access a variable defined in one document inside another document.You have to use document.importNode(original Node as in other document,boolean) method as per DOM 2.
Do something like this for javacript code ...
iframe=document.getElementsTagName("iframe")[0];
documentI(original variable/node present here)-
OriginalNode=iframe.contentWindow.document.getElementsByTagName(//Tag name of Node//)
documentII(node to be cloned here)- iframe.contentWindow.document.importNode(OriginalNode,True)
Node can be created of any method,property or object in any iframe by simple DOM methods.
This would work
index.html
<html>
<head>
<script type="text/javascript">
function run() {
window.parent.document.getElementById("iframe-2").src = "/test.html";
}
</script>
</head>
<body onload="run();">
</body>
</html>
How about this?
Or create a method inside main.html and access it using:
window.parent.methodname();
Ron.
ps. window.parent.methodname(); works perfectly for me when I have a method in main.html
main.html
<html>
<head> </head>
<script>
function foo() {
alert(1);
}
</script>
<body>
<iframe id="iframe-1" src="index.html"></iframe>
<iframe id="iframe-2" ></iframe>
</body>
</html>

Categories

Resources