How to Call Javascript method from a javascript file in the Iframe of aspx page?

Question

I have an aspx page where I have a parent page xyz.aspx page where one js file(abc.js) mentioned in the <head> tag. I need to call a method written in abc.js in child aspx page on load based on some condition. I would like to know how to call this function in child aspx page under document.ready()/window.onload.

I tried using parent.methodname() under script tag but it didnt work. Here is the code how it looks like:

<script type="text/javascript">
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
        return results === null ? "" :         decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    $(window).load(function () {
        var flgInsidePresentation = getParameterByName("flgInsidePresentation");
        if (flgInsidePresentation) { parent.updateButtons(null, 2, 1); }
    });


</script>

If I write only Parent in my console i get the parent page(xyz.aspx) where the js file is mentioned under <head> tag.

PS: I have to call updateButtons method from deck.navigation.js file from my child.aspx page

(function($, undefined) {
  var $document = $(document);

  /* Updates link hrefs, and disabled states if last/first slide */
  var updateButtons = function(event, from, to) {
    var options = $.deck('getOptions');
    var lastIndex = $.deck('getSlides').length - 1;
    var $prevSlide = $.deck('getSlide', to - 1);
    var $nextSlide = $.deck('getSlide', to + 1);
    var hrefBase = window.location.href.replace(/#.*/, '');
    var prevId = $prevSlide ? $prevSlide.attr('id') : undefined;
    var nextId = $nextSlide ? $nextSlide.attr('id') : undefined;
    var $prevButton = $(options.selectors.previousLink);
    var $nextButton = $(options.selectors.nextLink);

    $prevButton.toggleClass(options.classes.navDisabled, to === 0);
    $prevButton.attr('aria-disabled', to === 0);
    $prevButton.attr('href', hrefBase + '#' + (prevId ? prevId : ''));
    $nextButton.toggleClass(options.classes.navDisabled, to === lastIndex);
    $nextButton.attr('aria-disabled', to === lastIndex);
    $nextButton.attr('href', hrefBase + '#' + (nextId ? nextId : ''));
  };

  /*
  Extends defaults/options.

  options.classes.navDisabled
    This class is added to a navigation link when that action is disabled.
    It is added to the previous link when on the first slide, and to the
    next link when on the last slide.

  options.selectors.nextLink
    The elements that match this selector will move the deck to the next
    slide when clicked.

  options.selectors.previousLink
    The elements that match this selector will move to deck to the previous
    slide when clicked.
  */
  $.extend(true, $.deck.defaults, {
    classes: {
      navDisabled: 'deck-nav-disabled'
    },

    selectors: {
      nextLink: '.deck-next-link',
      previousLink: '.deck-prev-link'
    }
  });

  $document.bind('deck.init', function() {
    var options = $.deck('getOptions');
    var slides = $.deck('getSlides');
    var $current = $.deck('getSlide');
    var $prevButton = $(options.selectors.previousLink);
    var $nextButton = $(options.selectors.nextLink);
    var index;

    // Setup prev/next link events
    $prevButton.unbind('click.decknavigation');
    $prevButton.bind('click.decknavigation', function(event) {
      $.deck('prev');
      event.preventDefault();
    });

    $nextButton.unbind('click.decknavigation');
    $nextButton.bind('click.decknavigation', function(event) {
      $.deck('next');
      event.preventDefault();
    });

    // Find where we started in the deck and set initial states
    $.each(slides, function(i, $slide) {
      if ($slide === $current) {
        index = i;
        return false;
      }
    });
    updateButtons(null, index, index);
  });

  $document.bind('deck.change', updateButtons);
})(jQuery);

Please let me know if there is any other way. Thanks for the help in advance.

are the .js file loaded into the page when you open the project? — Mathias Rønnow Nørtoft, Mar 27 '17 at 11:35
they are actually referred in parent page and can be seen in developer tool under head tag — Ankit Kumar, Mar 27 '17 at 12:16
its a presentation slide which is over a presentation page[parent page] where all slides[child page] are specified in a iframe. The arrow icons to navigate are over parent page which calls the update button function and changes the index. now i have links over a child page to navigate to different slide and hence i want to call updatebutton function when navigating between slides by clicking on links — Ankit Kumar, Mar 29 '17 at 09:45
@AnkitKumar Have you tried the solution i have posted below? — Ratheesh, Mar 30 '17 at 07:52

score 0 · Accepted Answer · edited May 23 '17 at 12:32

0

Have a look at this question Calling a parent window function from an iframe. I am sure you will find you answer there. Make sure that your parent page and iframe use same domain if not - check this answer https://stackoverflow.com/a/14948796/2138959.

EDIT: In the code example you posted updateButtons function is defined in the scope of anonymous function and is not available in global scope. If you want to make it available you should change it to something like:

(function($, global, undefined) {
  var $document = $(document);

  /* Updates link hrefs, and disabled states if last/first slide */
  global.updateButtons = function(event, from, to) {

  ...

  };

  ...

})(jQuery, window);

edited May 23 '17 at 12:32

Community

1
1

answered Mar 29 '17 at 08:00

Andrii Litvinov

12,402
3
52
59

This should be a comment. – anmarti Mar 29 '17 at 08:04
@anmarti, I was not sure whether this should be a comment or an answer. How to decide? Can you point to rules? – Andrii Litvinov Mar 29 '17 at 08:06
just give me a moment.. I am trying now.. if it comments or not...thats not the point for me right now – Ankit Kumar Mar 29 '17 at 08:29
Hi Andrii..did your thing.. I get Unable to set property 'updateButtons' of undefined or null reference on the line global.updateButtons – Ankit Kumar Mar 29 '17 at 10:32
@AnkitKumar, Are you sure you pass `window` as a parameter to the wrapper function? And also introduce that parameter? First and last line in my example? – Andrii Litvinov Mar 29 '17 at 10:36
what should i give under if (flgInsidePresentation) {...} should be window.updateButtons or parent.updateButtons?? – Ankit Kumar Mar 29 '17 at 10:56
@AnkitKumar, it should be `parent.updateButtons(...)`. – Andrii Litvinov Mar 29 '17 at 11:06
@AnkitKumar try also call `window.top.updateButtons(...)` – Andrii Litvinov Mar 29 '17 at 11:08
1

well didnt run through any error and was able to call the function..but still the data didnt get updated as per the function..checking on it..will get back – Ankit Kumar Mar 29 '17 at 11:24
@AnkitKumar, Which code worked for you `parent` or `window.top`? If latter then maybe you need to updated implementation of updateButtons a little. – Andrii Litvinov Mar 29 '17 at 11:34
@AnkitKumar, please consider to accept the answer if it helped to solve your task. – Andrii Litvinov Mar 29 '17 at 14:24
Hi Andrii..Thanks for the answer..bounty point goes to you as you were first in response. – Ankit Kumar Mar 30 '17 at 11:22
Andrii..moving further.. I have a variable value which I need to update in my js file from the child aspx page. How to do that? like below I need to pass the updated value of variable currentIndex. Sorry got no bount points anymore.:) (function($,global, undefined) { var slides,currentIndex, $container, $fragmentLinks; var events = { ..... prev: function() { methods.go(currentIndex-1); }, – Ankit Kumar Mar 30 '17 at 11:34
@AnkitKumar, It is hard to tell without knowing the context. You can use same technic and expose the method in `window` that will update your variable. But generally it is more like anti-pattern. If that doesn't help try creating new question and describe what you need. – Andrii Litvinov Mar 30 '17 at 12:22

Marcus Höglund · Answer 2 · 2017-03-29T11:04:46.427

0

The problem is that your updateButtons function is in a private scope. Looks like you are building a jQuery plugin so the easiest way to solve this is to add the window to the scope and attach the function to that

(function($, window, undefined) {
  var $document = $(document);

  /* Updates link hrefs, and disabled states if last/first slide */
  window.updateButtons = function(event, from, to) {
    //your code
  };
 })(jQuery, window);

Then call the function in your iframe

window.parent.updateButtons()

edited Mar 29 '17 at 11:04

answered Mar 29 '17 at 08:24

Marcus Höglund

16,172
11
47
69

i am not sure if you got my question correctly: I have this parent page where html is something like this:
Now the child page is where I need to call a method from abc.js. If I write parent.functionname()... i get functionname is not defined. My parent page and child page has same domain – Ankit Kumar Mar 29 '17 at 09:34
check the question. edited it. the abc.js is the deck.navigation.js file link and functionname is updateButtons() – Ankit Kumar Mar 29 '17 at 09:42

score 0 · Answer 3 · answered Mar 29 '17 at 09:57

Actually you are calling the method correctly. parent.MethodName should work

i think the problem is with " $(window).load(function (){})", it should be like window.onload = function () { //code here; }

<script type="text/javascript">
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results === null ? "" :         decodeURIComponent(results[1].replace(/\+/g, " "));
}

 window.onload = function () {
    var flgInsidePresentation = getParameterByName("flgInsidePresentation");
    if (flgInsidePresentation) { parent.updateButtons(null, 2, 1); }
};

Also make sure that your updateButtons works without any error

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

This is because of Scope issues.

(function($, undefined) {
  var $document = $(document);

  /* Updates link hrefs, and disabled states if last/first slide */
  var updateButtons = function(event, from, to) {
    var options = $.deck('getOptions');
    var lastIndex = $.deck('getSlides').length - 1;
    var $prevSlide = $.deck('getSlide', to - 1);
    var $nextSlide = $.deck('getSlide', to + 1);
    var hrefBase = window.location.href.replace(/#.*/, '');
    var prevId = $prevSlide ? $prevSlide.attr('id') : undefined;
    var nextId = $nextSlide ? $nextSlide.attr('id') : undefined;
    var $prevButton = $(options.selectors.previousLink);
    var $nextButton = $(options.selectors.nextLink);

    $prevButton.toggleClass(options.classes.navDisabled, to === 0);
    $prevButton.attr('aria-disabled', to === 0);
    $prevButton.attr('href', hrefBase + '#' + (prevId ? prevId : ''));
    $nextButton.toggleClass(options.classes.navDisabled, to === lastIndex);
    $nextButton.attr('aria-disabled', to === lastIndex);
    $nextButton.attr('href', hrefBase + '#' + (nextId ? nextId : ''));
  };

  /*
  Extends defaults/options.

  options.classes.navDisabled
    This class is added to a navigation link when that action is disabled.
    It is added to the previous link when on the first slide, and to the
    next link when on the last slide.

  options.selectors.nextLink
    The elements that match this selector will move the deck to the next
    slide when clicked.

  options.selectors.previousLink
    The elements that match this selector will move to deck to the previous
    slide when clicked.
  */
  $.extend(true, $.deck.defaults, {
    classes: {
      navDisabled: 'deck-nav-disabled'
    },

    selectors: {
      nextLink: '.deck-next-link',
      previousLink: '.deck-prev-link'
    }
  });

  $document.bind('deck.init', function() {
    var options = $.deck('getOptions');
    var slides = $.deck('getSlides');
    var $current = $.deck('getSlide');
    var $prevButton = $(options.selectors.previousLink);
    var $nextButton = $(options.selectors.nextLink);
    var index;

    // Setup prev/next link events
    $prevButton.unbind('click.decknavigation');
    $prevButton.bind('click.decknavigation', function(event) {
      $.deck('prev');
      event.preventDefault();
    });

    $nextButton.unbind('click.decknavigation');
    $nextButton.bind('click.decknavigation', function(event) {
      $.deck('next');
      event.preventDefault();
    });

    // Find where we started in the deck and set initial states
    $.each(slides, function(i, $slide) {
      if ($slide === $current) {
        index = i;
        return false;
      }
    });
    updateButtons(null, index, index);
  });

  $document.bind('deck.change', updateButtons);
})(jQuery);

In the above, you are declaring the function with var keyword. It's scope is inside the function only and you can access it only via the $.

How to Call Javascript method from a javascript file in the Iframe of aspx page?

4 Answers4

This is because of Scope issues.