how to call a child element from parent element

Question

consider the below given two HTML pages

parent.html

<!DOCTYPE html>
<html>
<body>
<button id='parent' onclick="test()">Click Me</button>
<div  class='test-ab' id="load"></div>
</body>

<script>
  function test()
  {
    //need to call child function or button
  }

  $(function(){
    $('#load').html('<object id="webloader" data="child.html"/>');
  });
</script>
</html>

child.html

<!DOCTYPE html>
<html>
<body>
<button id='child' onclick="helloworld()">Click Me</button>
</body>
<script>
  function helloworld()
  {
    alert("hello world");
  }
</script>

</html>

there are two defined HTML pages defined, is there any way to call the child.html function (eg here:-helloworld()) from parent.html

Assuming both pages are on the same domain then you could use an `iframe`: https://stackoverflow.com/questions/1600488/calling-javascript-function-in-iframe. A better method entirely would be to create your own library of common functions and include it in both pages. — Rory McCrossan, Jul 10 '18 at 09:40
current I have loaded it through the object tag, currently the function is defined under child.html only — paradox, Jul 10 '18 at 09:42
why don't use put all javascript in one file and load it in both html pages ? — madjaoue, Jul 10 '18 at 09:42
i could access parent functions through parent.function() in child.html, in the same way i thought we could for parent to child access — paradox, Jul 10 '18 at 09:45

score 1 · Accepted Answer · answered Jul 10 '18 at 09:43

1

You could try the postMessage mechanism

Regards, Vincent

answered Jul 10 '18 at 09:43

vcaraccio

76
5

will it work for the HTML page defined with – paradox Jul 10 '18 at 09:59

score 0 · Answer 2 · answered Jul 10 '18 at 09:47

0

You can try this:

let child_element = $("#parent").find(".load");

answered Jul 10 '18 at 09:47

Ankit

562
5
12

can you give me an example how to use it please – paradox Jul 10 '18 at 10:01
Yes, I can. please describe the condition. – Ankit Jul 10 '18 at 10:04
when I click the parent button "Click Me" I need to call child HTML function helloworld() as given in example code – paradox Jul 10 '18 at 10:11
I suggest you check your HTML code first, as I found lots of HTML errors in your code. 1) 2) wrong format to call a function – Ankit Jul 10 '18 at 10:29

how to call a child element from parent element

2 Answers2