Calling the parent’s Javascript function from within a daughter iframe that is not in the same folder as the parent

Asked

Viewed 276 times

0

I have the following scenario:

A parent file is calling an iframe daughter. the father and daughter are in completely separate folders.

I need the daughter to call in javascript a function, also in javascript, which is in the father. How are in different folders the code parent.funcao(); doesn’t work, right? How do I replace this parent by the path of the server where the father is?

Example:

htm page (Father)

<style>
*{
margin:0;padding:0;
}
#iframe{
overflow:hidden;
}
</style>
<script>
function WHFRAME(w,h){
var FrameWH = document.getElementById("iframe");

FrameWH.style.width  = w+"px";
FrameWH.style.height = h+"px";
}
</script>

<iframe src="iframe.htm" id="iframe"></iframe>

iframe.htm (daughter)

<html>
<head>
<title>pagina</title>
<style>
*{
margin:0;padding:0;
}
html,body{
overflow:hidden;
}
#corpo{
width:990px;
height:auto;
}
</style>
<script type="text/javascript">
function ResizeWH(){
var w;
var h;

w = document.getElementById("corpo").clientWidth;
h = document.getElementById("corpo").clientHeight;
window.parent.WHFRAME(w,h);
}
</script>
</head>
<body>
<div id="corpo">
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
</div>
</body>
<script>
ResizeWH();
</script>
</html>

In the above example the two files are in the same folder, so it works, in my scenario the daughter is in another folder (same server, but in different drives). So the line <iframe src="iframe.htm" id="iframe"></iframe> would be so <iframe src="http://caminho.../iframe.htm" id="iframe"></iframe>.

Obs.: It is a script to leave the dynamical daughter iframe size inside the father.

javascript iframe

  • Include your code as a verifiable example so that the problem can be reproduced.

  • No matter which folder you are in, iframe will always be the child. It just needs to be in the same domain.

  • What if it is not in the same domain? How could it be done?

  • @Zacariasjunior if not in the same domain is not possible.

1 answer

0


I was able to solve the problem as follows: as the parent file was not in the same domain as the iframe daughter, I created a file in the same domain as the father redirecting to the daughter who is on another domain and called him in the parent file. Getting 3 files as follows:

htm page (Father)

<style>
*{
margin:0;padding:0;
}
#iframe{
overflow:hidden;
}
</style>
<script>
function WHFRAME(w,h){
var FrameWH = document.getElementById("iframe");

FrameWH.style.width  = w+"px";
FrameWH.style.height = h+"px";
}
</script>

<iframe src="redirect.php" id="iframe"></iframe>

Redirect.php

<?php

include "caminho.../iframe.htm";

?>

iframe.htm (Daughter)

<html>
<head>
<title>pagina</title>
<style>
*{
margin:0;padding:0;
}
html,body{
overflow:hidden;
}
#corpo{
width:990px;
height:auto;
}
</style>
<script type="text/javascript">
function ResizeWH(){
var w;
var h;

w = document.getElementById("corpo").clientWidth;
h = document.getElementById("corpo").clientHeight;
window.parent.WHFRAME(w,h);
}
</script>
</head>
<body>
<div id="corpo">
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>

</div>
</body>
<script>
ResizeWH();
</script>
</html>

Browser other questions tagged javascript iframe

You are not signed in. Login or sign up in order to post.