Rectangle 27 12

If you run the iframe and the parent document from the same domain name (so that no Cross-Site-Scripting-Restrictions apply) then you can call a JavaScript function in the iframe which you could pass data.

What you might be missing is that the iframe is a separate document from the viewpoint of the browser. So if this iframe should run AngularJS code, you will need to make it a separate AngularJS application.

Here is a example where both the parent document and the iframe are separate AngularJS applications and the value of a text input in the parent is sent upon change to the iframe where the AngularJS application running there will put the data into the scope.

Exactly what I was looking for. I guess I just wasn't sure if Angularjs did some background processing and included the additional viewport in its scope by default. This clears things up, and thanks for the plnkr...very clear.

I also want something like this but my situation is opposite. I want to update data of page from iframe. Is it possible?

Yes, you only need to reference the parent page from the iframe in this case. I have not looked it up, but something like window.parent shall work.

javascript - Is it possible to update angularjs expressions inside of ...

javascript html angularjs iframe
Rectangle 27 42

Put a print function in the iframe and call it from the parent.

function printMe() {
  window.print()
}
document.frame1.printMe()

Use the NAME property, not the ID.

It is not working in IE8.It is printing all the contents (outside of iframe also).Any idea please..

Check your print settings. The browser controls this, not the page.

How do I print an IFrame from javascript in Safari/Chrome - Stack Over...

javascript iframe webkit printing
Rectangle 27 5

Removing src from the iframe in the template and simply changing the attribute in the link function (via element.attr()) works:

return {
    restrict: 'E',
    require: '?ngModel',
    replace: true,
    transclude: true,
    template: '<iframe height="100%" width="100%" frameborder="0"></iframe>',
    link: function (scope, element, attrs) {
        element.attr('src', attrs.iframeSrc);
    }
};

Thanks for that, the element.attr( part was usefull.

javascript - Angular : src attribute bug in Iframe directive - Stack O...

javascript angularjs iframe angularjs-directive
Rectangle 27 40

To access and communicate in two directions (parent to iFrame, iFrame to parent), in case they are both in the same domain, with access to the angular scope, try following those steps:

1.Get child iFrame element from the parent (link to answer):

2.Access the scope of the element:

3.Call the scopes function or property:

4.Call $scope.$apply after running the logic of the function/updating the property (link to Mishkos answer):

  • Another solution is to share the scope between the iFrames, but then you need angular in both sides: (link to answer and example)

Will update also on how to do it cross domain if it is necessary..

var $scope = parent.angular.element('#element-id').scope();

Thanks for the great answer. Angular 1.2x introduced the $evalAsync() method which avoids having to use $timeout with $apply. Using $timeout was recommended in earlier versions of Angular to guarantee that the change would be picked up in the $digest cycle (could end up in a race condition otherwise).

WARNING! .scope() is not a production method. It is for debugging only and is removed in production mode! docs.angularjs.org/guide/production

javascript - Angularjs: call other scope which in iframe - Stack Overf...

javascript angularjs angularjs-scope
Rectangle 27 32

With Angular 1.2, you need to inject $sce service and trustAsResourceURL the src of an iframe.

.directive('youtube', function($sce) {
  return {
    restrict: 'EA',
    scope: { code:'=' },
    replace: true,
    template: '<div style="height:400px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
    link: function (scope) {
        scope.$watch('code', function (newVal) {
           if (newVal) {
               scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
           }
        });
    }
  };
});

I tried the above and I added the missing comma for the end of the template: line, Now it's not giving any error, but it doesn't show the video embedded, inspecting the element I see the src attr empty.

@JonathanHindi It works here: plnkr.co/edit/0N728e9SAtXg3uBvuXKF?p=preview with Angular 1.2 How are you using the directive in the template?

Thanks now it works, I was using the <youtube code="{{code}}"></youtube> I thought I need to pass it with the currently brackets to be evaluated first then pass the actual value to the directive. but it seems that I was wrong.

You saved me lots of try and error. Thanks @musically_ut

javascript - Create a YouTube AngularJS Directive - Stack Overflow

javascript angularjs youtube angularjs-directive
Rectangle 27 32

With Angular 1.2, you need to inject $sce service and trustAsResourceURL the src of an iframe.

.directive('youtube', function($sce) {
  return {
    restrict: 'EA',
    scope: { code:'=' },
    replace: true,
    template: '<div style="height:400px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
    link: function (scope) {
        scope.$watch('code', function (newVal) {
           if (newVal) {
               scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
           }
        });
    }
  };
});

I tried the above and I added the missing comma for the end of the template: line, Now it's not giving any error, but it doesn't show the video embedded, inspecting the element I see the src attr empty.

@JonathanHindi It works here: plnkr.co/edit/0N728e9SAtXg3uBvuXKF?p=preview with Angular 1.2 How are you using the directive in the template?

Thanks now it works, I was using the <youtube code="{{code}}"></youtube> I thought I need to pass it with the currently brackets to be evaluated first then pass the actual value to the directive. but it seems that I was wrong.

You saved me lots of try and error. Thanks @musically_ut

javascript - Create a YouTube AngularJS Directive - Stack Overflow

javascript angularjs youtube angularjs-directive
Rectangle 27 9

I prefer putting this kind of code in the app.run() function of angular.

angular
.module('testApp', ['someModule'])
.constant('aConstant', 'hi')
.config(function($rootProvider) {/*some routing here*/})
.run(['$window', function($window) {
  $window.onload = function() {/*do your thing*/};
}]);

also check this nice post that depicts the order that some things happen in angular AngularJS app.run() documentation?

window.onload does not work in AngularJS - Stack Overflow

window angularjs onload
Rectangle 27 3

Case 1 : Using angularJs alone: To execute a method on page load, you can use ng-init in the view and declare init method in controller, having said that use of heavier function is not recommended, as per the angular Docs on ng-init:

This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.

<div ng-controller="searchController()">
    <!-- renaming view code here, including the search box and the buttons -->
</div>
app.controller('SearchCtrl', function(){

    var doSearch = function(keyword){
        //Search code here
    }

    doSearch($routeParams.searchKeyword);
})

Warning : Do not use this controller for another view meant for a different intention as it will cause the search method be executed there too.

Case 2 : Using Ionic: The above code will work, just make sure the view cache is disabled in the route.js as:

.state('app', {
    url           : '/search',
    cache         : false, //disable caching of the view here
    templateUrl   : 'templates/search.html'   ,
    controller    : 'SearchCtrl'
  })

This only had one up and was at the very bottom, glad I went all the way down, the cache: false did it for me thanks!

angularjs - How to execute angular controller function on page load? -...

angularjs onload
Rectangle 27 58

Calling a parent JS function from iframe is possible, but only when both the parent and the page loaded in the iframe are from same domain i.e. abc.com, and both are using same protocol i.e. both are either on http:// or https://.

  • Parent page and the iframe page are from different domain.
  • They are using different protocols, one is on http:// and other is on https://.

For instance, imagine I registered the domain superwinningcontest.com and sent out links to people's emails. When they loaded up the main page, I could hide a few iframes in there and read their Facebook feed, check recent Amazon or PayPal transactions, or--if they used a service that did not implement sufficient security--transfer money out of their accounts. That's why JavaScript is limited to same-domain and same-protocol.

Does anyone know if a different sub-domain will cause this to fail? I'm having difficulty debugging an issue that I believe is related to this - the iframe is calling a parent window function, but the call isn't happening.

html - Invoking JavaScript code in an iframe from the parent page - St...

javascript html iframe
Rectangle 27 58

Calling a parent JS function from iframe is possible, but only when both the parent and the page loaded in the iframe are from same domain i.e. abc.com, and both are using same protocol i.e. both are either on http:// or https://.

  • Parent page and the iframe page are from different domain.
  • They are using different protocols, one is on http:// and other is on https://.

For instance, imagine I registered the domain superwinningcontest.com and sent out links to people's emails. When they loaded up the main page, I could hide a few iframes in there and read their Facebook feed, check recent Amazon or PayPal transactions, or--if they used a service that did not implement sufficient security--transfer money out of their accounts. That's why JavaScript is limited to same-domain and same-protocol.

Does anyone know if a different sub-domain will cause this to fail? I'm having difficulty debugging an issue that I believe is related to this - the iframe is calling a parent window function, but the call isn't happening.

html - Invoking JavaScript code in an iframe from the parent page - St...

javascript html iframe
Rectangle 27 58

Calling a parent JS function from iframe is possible, but only when both the parent and the page loaded in the iframe are from same domain i.e. abc.com, and both are using same protocol i.e. both are either on http:// or https://.

Calling a parent JS function from iframe is possible, but only when both the parent and the page loaded in the iframe are from same domain i.e. abc.com, and both are using same protocol i.e. both are either on http:// or https://.

  • Parent page and the iframe page are from different domain.
  • Parent page and the iframe page are from different domain.
  • They are using different protocols, one is on http:// and other is on https://.
  • They are using different protocols, one is on http:// and other is on https://.

For instance, imagine I registered the domain superwinningcontest.com and sent out links to people's emails. When they loaded up the main page, I could hide a few iframes in there and read their Facebook feed, check recent Amazon or PayPal transactions, or--if they used a service that did not implement sufficient security--transfer money out of their accounts. That's why JavaScript is limited to same-domain and same-protocol.

For instance, imagine I registered the domain superwinningcontest.com and sent out links to people's emails. When they loaded up the main page, I could hide a few iframes in there and read their Facebook feed, check recent Amazon or PayPal transactions, or--if they used a service that did not implement sufficient security--transfer money out of their accounts. That's why JavaScript is limited to same-domain and same-protocol.

Does anyone know if a different sub-domain will cause this to fail? I'm having difficulty debugging an issue that I believe is related to this - the iframe is calling a parent window function, but the call isn't happening.

Does anyone know if a different sub-domain will cause this to fail? I'm having difficulty debugging an issue that I believe is related to this - the iframe is calling a parent window function, but the call isn't happening.

html - Invoking JavaScript code in an iframe from the parent page - St...

javascript html iframe
Rectangle 27 58

Calling a parent JS function from iframe is possible, but only when both the parent and the page loaded in the iframe are from same domain i.e. abc.com, and both are using same protocol i.e. both are either on http:// or https://.

  • Parent page and the iframe page are from different domain.
  • They are using different protocols, one is on http:// and other is on https://.

For instance, imagine I registered the domain superwinningcontest.com and sent out links to people's emails. When they loaded up the main page, I could hide a few iframes in there and read their Facebook feed, check recent Amazon or PayPal transactions, or--if they used a service that did not implement sufficient security--transfer money out of their accounts. That's why JavaScript is limited to same-domain and same-protocol.

Does anyone know if a different sub-domain will cause this to fail? I'm having difficulty debugging an issue that I believe is related to this - the iframe is calling a parent window function, but the call isn't happening.

html - Invoking JavaScript code in an iframe from the parent page - St...

javascript html iframe
Rectangle 27 58

Calling a parent JS function from iframe is possible, but only when both the parent and the page loaded in the iframe are from same domain i.e. abc.com, and both are using same protocol i.e. both are either on http:// or https://.

  • Parent page and the iframe page are from different domain.
  • They are using different protocols, one is on http:// and other is on https://.

For instance, imagine I registered the domain superwinningcontest.com and sent out links to people's emails. When they loaded up the main page, I could hide a few iframes in there and read their Facebook feed, check recent Amazon or PayPal transactions, or--if they used a service that did not implement sufficient security--transfer money out of their accounts. That's why JavaScript is limited to same-domain and same-protocol.

Does anyone know if a different sub-domain will cause this to fail? I'm having difficulty debugging an issue that I believe is related to this - the iframe is calling a parent window function, but the call isn't happening.

html - Invoking JavaScript code in an iframe from the parent page - St...

javascript html iframe
Rectangle 27 357

<a onclick="parent.abc();" href="#" >Call Me </a>

Returns a reference to the parent of the current window or subframe.

If a window does not have a parent, its parent property is a reference to itself.

When a window is loaded in an <iframe>, <object>, or <frame>, its parent is the window with the element embedding the window.

Always take into account that parent document and iframe document must match by protocol and domain name. If it does not happen then you will get a security error as it is not allow to have cross domain scripting.

M just wondering which one the two alerts will be invoked; parent's alert function or iframe's alert function, in case parent.abc(); is called on iframe?

window.postMessage()
window.parent.postMessage()

javascript - Calling a parent window function from an iframe - Stack O...

javascript iframe onclick
Rectangle 27 27

In the IFRAME, make your function public to the window object:

window.myFunction = function(args) {
   doStuff();
}

For access from the parent page, use this:

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

Great Answer. Not sure of the convention here. I have a follow up question. If I should start a new Question, I will. I have one problem. My page's iframe is populated dynamically. It contains a button whose onclick() event simply calls window.print(). This prints the content of the iframe perfectly. But when the iframe's page's public function calls window.print() and if the parent page calls the public function, the content of the parent is printed. How should I code this so the call to window.print() in the public function behaves as it does in the onclick event?

onclick
iframe.contentWindow.print()
window.print()
document.getElementById('myFrame').contentWindow.printContent();

@Karl - Yes, then it's best to start a new question. Unless the parent window is on a different domain than the iframe. Then nothing you try will ever work.

What I reported here seems to be an IE problem (testing in IE8). No problem in current version of Chrome. Have yet to test other browsers however. For those interested, see this jsFiddle (I think this is a good example of dynamic iframe loading and calling a public function from the parent.)

html - Invoking JavaScript code in an iframe from the parent page - St...

javascript html iframe
Rectangle 27 27

In the IFRAME, make your function public to the window object:

window.myFunction = function(args) {
   doStuff();
}

For access from the parent page, use this:

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

Great Answer. Not sure of the convention here. I have a follow up question. If I should start a new Question, I will. I have one problem. My page's iframe is populated dynamically. It contains a button whose onclick() event simply calls window.print(). This prints the content of the iframe perfectly. But when the iframe's page's public function calls window.print() and if the parent page calls the public function, the content of the parent is printed. How should I code this so the call to window.print() in the public function behaves as it does in the onclick event?

onclick
iframe.contentWindow.print()
window.print()
document.getElementById('myFrame').contentWindow.printContent();

@Karl - Yes, then it's best to start a new question. Unless the parent window is on a different domain than the iframe. Then nothing you try will ever work.

What I reported here seems to be an IE problem (testing in IE8). No problem in current version of Chrome. Have yet to test other browsers however. For those interested, see this jsFiddle (I think this is a good example of dynamic iframe loading and calling a public function from the parent.)

html - Invoking JavaScript code in an iframe from the parent page - St...

javascript html iframe
Rectangle 27 27

In the IFRAME, make your function public to the window object:

In the IFRAME, make your function public to the window object:

window.myFunction = function(args) {
   doStuff();
}
window.myFunction = function(args) {
   doStuff();
}

For access from the parent page, use this:

For access from the parent page, use this:

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);
var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

Great Answer. Not sure of the convention here. I have a follow up question. If I should start a new Question, I will. I have one problem. My page's iframe is populated dynamically. It contains a button whose onclick() event simply calls window.print(). This prints the content of the iframe perfectly. But when the iframe's page's public function calls window.print() and if the parent page calls the public function, the content of the parent is printed. How should I code this so the call to window.print() in the public function behaves as it does in the onclick event?

Great Answer. Not sure of the convention here. I have a follow up question. If I should start a new Question, I will. I have one problem. My page's iframe is populated dynamically. It contains a button whose onclick() event simply calls window.print(). This prints the content of the iframe perfectly. But when the iframe's page's public function calls window.print() and if the parent page calls the public function, the content of the parent is printed. How should I code this so the call to window.print() in the public function behaves as it does in the onclick event?

onclick
onclick
iframe.contentWindow.print()
iframe.contentWindow.print()
document.getElementById('myFrame').contentWindow.print();' and the pubic function
window.print()
window.print()
document.getElementById('myFrame').contentWindow.printContent();
document.getElementById('myFrame').contentWindow.printContent();

@Karl - Yes, then it's best to start a new question. Unless the parent window is on a different domain than the iframe. Then nothing you try will ever work.

@Karl - Yes, then it's best to start a new question. Unless the parent window is on a different domain than the iframe. Then nothing you try will ever work.

What I reported here seems to be an IE problem (testing in IE8). No problem in current version of Chrome. Have yet to test other browsers however. For those interested, see this jsFiddle (I think this is a good example of dynamic iframe loading and calling a public function from the parent.)

What I reported here seems to be an IE problem (testing in IE8). No problem in current version of Chrome. Have yet to test other browsers however. For those interested, see this jsFiddle (I think this is a good example of dynamic iframe loading and calling a public function from the parent.)

html - Invoking JavaScript code in an iframe from the parent page - St...

javascript html iframe
Rectangle 27 27

In the IFRAME, make your function public to the window object:

window.myFunction = function(args) {
   doStuff();
}

For access from the parent page, use this:

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

Great Answer. Not sure of the convention here. I have a follow up question. If I should start a new Question, I will. I have one problem. My page's iframe is populated dynamically. It contains a button whose onclick() event simply calls window.print(). This prints the content of the iframe perfectly. But when the iframe's page's public function calls window.print() and if the parent page calls the public function, the content of the parent is printed. How should I code this so the call to window.print() in the public function behaves as it does in the onclick event?

onclick
iframe.contentWindow.print()
window.print()
document.getElementById('myFrame').contentWindow.printContent();

@Karl - Yes, then it's best to start a new question. Unless the parent window is on a different domain than the iframe. Then nothing you try will ever work.

What I reported here seems to be an IE problem (testing in IE8). No problem in current version of Chrome. Have yet to test other browsers however. For those interested, see this jsFiddle (I think this is a good example of dynamic iframe loading and calling a public function from the parent.)

html - Invoking JavaScript code in an iframe from the parent page - St...

javascript html iframe
Rectangle 27 27

In the IFRAME, make your function public to the window object:

window.myFunction = function(args) {
   doStuff();
}

For access from the parent page, use this:

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

Great Answer. Not sure of the convention here. I have a follow up question. If I should start a new Question, I will. I have one problem. My page's iframe is populated dynamically. It contains a button whose onclick() event simply calls window.print(). This prints the content of the iframe perfectly. But when the iframe's page's public function calls window.print() and if the parent page calls the public function, the content of the parent is printed. How should I code this so the call to window.print() in the public function behaves as it does in the onclick event?

onclick
iframe.contentWindow.print()
window.print()
document.getElementById('myFrame').contentWindow.printContent();

@Karl - Yes, then it's best to start a new question. Unless the parent window is on a different domain than the iframe. Then nothing you try will ever work.

What I reported here seems to be an IE problem (testing in IE8). No problem in current version of Chrome. Have yet to test other browsers however. For those interested, see this jsFiddle (I think this is a good example of dynamic iframe loading and calling a public function from the parent.)

html - Invoking JavaScript code in an iframe from the parent page - St...

javascript html iframe
Rectangle 27 16

You can use window.postMessage to call a function between page and his iframe (cross domain or not).

<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'iframe',
        variable:'The iframe.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    $(window).on('load', function() {
        if(window.parent.postMessage) {
            window.parent.postMessage('Hello ' + Page.id, '*');
        }
    });
    </script>
</head>
<body>
    <h1>iframe</h1>
    <p>It's the iframe.</p>
</body>
</html>

jQuery/JavaScript: accessing contents of an iframe - Stack Overflow

javascript jquery iframe same-origin-policy