0

I am a Web dev newbie. I have an iframe named optionFrame embedded in a page index.html. I want to invoke a javascript function draw(arg) in index.html which create a FancyTree based on the arg of draw() from frame. It works perfectly fine in Chrome but in Firefox it is showing weird behavior. If the debugger is off, the fancytree is not loaded at all and I get these errors:

TypeError: parent.draw is not a function

Use of getPreventDefault() is deprecated. Use defaultPrevented instead.

index.html

{% block content %}
<div class="container-fluid" >
  <div class="row-fluid" >  
    <div class="col-md-12" id="options" >
      <div ><iframe src="/option/" style="border:0;" width="100%" height="60px" id="options_frame"></iframe>
      </div>
    </div>
 </div>
 <div class="row-fluid" >  
   <div class="col-md-5" id="tree" source="ajax" >  </div>     
 </div>
</div>
<script>
  function draw(args){
       //draw the FancyTree
  }
</script>
<!-- For FancyTree plugin -->
<script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

<link href= "{{ url_for('static',filename='fancytree/skin-win8/ui.fancytree.min.css') }}" rel="stylesheet" type="text/css">
<script src="{{ url_for('static',filename='fancytree/jquery.fancytree-all.min.js') }}" type="text/javascript"></script>

{% endblock %}

iframe:

<script>
parent.draw(args)
</script>

When the debugger is on, the entire tree loads properly without any error or warning. I have used all three alternatives: parent, window.parent and window.top, none seem to work on firefox. Is there is a workaround for this?

I tried to tweak the code a bit more and saw that the parent reference is available but somehow the function is not available to Firefox. Can anyone tell me a solution?

mini.1601
  • 157
  • 1
  • 2
  • 12
  • The error was not copied properly. Edited the question. It says parent.draw is not a function. – mini.1601 Sep 14 '15 at 05:51
  • 2
    The iframe may be trying to execute the function in the parent before the function is defined - try putting the script block above the iframe ... I'd also be moving the other script blocks into the head if `draw` requires them – Jaromanda X Sep 14 '15 at 05:58
  • The rearrangement of block to the top did the trick. Thanks. I wasted my entire day trying to figure this out. Although I don't understand why did just Firefox have a problem. Seems like each browser parses the html in different manner? – mini.1601 Sep 14 '15 at 06:04
  • 1
    It was pure luck that *any* browser worked, since with the code in the wrong order everything was timing dependent. You got lucky with Chrome, but it was just by chance that it worked there. Once you do things in the right order - defining things before you use them - it should be reliable in every browser. – Michael Geary Sep 14 '15 at 06:06
  • Will keep this in mind. Thanks @Michael Geary – mini.1601 Sep 14 '15 at 06:08
  • possible duplicate of [Calling a parent window function from an iframe](http://stackoverflow.com/questions/2161388/calling-a-parent-window-function-from-an-iframe) – J Santosh Sep 14 '15 at 06:39

0 Answers0