Calling Javascript function from parent inside of an iframe daughter that is not in the same folder as parent

Question

Calling Javascript function from parent inside of an iframe daughter that is not in the same folder as parent

Navigation

#1 by (0 votes)

0

I have the following scenario:

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

I need the daughter to call a javascript function, also in javascript, which is in the parent. Because they are in separate folders, the parent.funcao(); code does not work, right? How do I replace this parent with the server path where the parent is?

Example:

page.htm (Parent)

<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 units). Therefore, the <iframe src="iframe.htm" id="iframe"></iframe> line would be <iframe src="http://caminho.../iframe.htm"id="iframe"></iframe> .

Note: It is a script to leave the size of the dynamic daughter iframe within the parent.

javascript iframe

asked by anonymous 22.03.2018 / 22:27

1 answer

Read cookie ["PAI"] ["SON"] in PHP ManyToMany JPA - Product Category

score 0 · Accepted Answer

I was able to resolve the problem as follows: since the parent file was not in the same domain as the child iframe, I created a file in the same domain as the parent redirecting to the daughter who is in another domain and called it in the parent file. Getting 3 files as follows:

page.htm (Parent)

<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>