Load specific div in iframe from external site in AngularJs

Question

Problem Question -

How to load a specific div from the external site into the iframe? I am aware of the Same Origin Policy and external Site belongs to me. How would I do this in AngularJs.

I looked for this but most of the answers are in jQuery only.

Thanks for the help

Update 1

Let me be more specific. For instance if you use iframe, it gives you access to everything. But I only want a Particular DIV of of this external URL.

<iframe style="border: 0" width="800" height="600" frameborder="0" scrolling="no" src="http://localhost:8888/">

Take a look at this stackoverflow.com/questions/20045150/… — Rishabh
– Rishabh, Commented Oct 20, 2014 at 2:43
I did, it is not what I am after. Please read my question. Thanks — GeekOnGadgets
– GeekOnGadgets, Commented Oct 20, 2014 at 2:44
Can you clarify (or show a jQuery example) of what you mean by load a div from external site into iframe? — New Dev
– New Dev, Commented Oct 20, 2014 at 3:22
stackoverflow.com/questions/3272071/… @NewDev this is the post of jquery. — GeekOnGadgets
– GeekOnGadgets, Commented Oct 20, 2014 at 3:42

New Dev · Accepted Answer · 2014-10-20 19:00:26Z

1

Typically, blindly and thoughtlessly using jQuery will not play nice with Angular. This is not so much because of jQuery - the library, but more so because Angular and jQuery promote different programming paradigms.

Nevertheless, jQuery is a toolbox, and one such tool is jQuery.load().

The best way, in my mind, to make it work with Angular is to create a directive that uses jQuery.load():

.directive("load", function($compile){
  return {
    restrict: "A",
    scope: true,
    link: function(scope, elem, attrs){

      attrs.$observe('load', function(newValue){
        elem.load(newValue, null, function(){

          // compile the newly imported div
          $compile(elem.contents())(scope);

          // need to force $digest, since this is outside of Angular digest cycle
          scope.$digest();
        });
      });
    }
  };
});

Then you could use it like so:

<div load="foo.html #id"></div>

or,

<div load="{{urlWithId}}"></div>

Be sure to load jQuery before Angular, otherwise .load will not be defined.

Plunker

answered Oct 20, 2014 at 19:00

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

GeekOnGadgets Over a year ago

Thanks for putting so much time in this. I will give this a try :).

GeekOnGadgets Over a year ago

I tried it out but somehow <div load="{{urlWithId}}"></div> does not work,neither it gives out any error in console. Does it worked for you ?

GeekOnGadgets Over a year ago

thanks :). One last question- For instance I make a ajax call to external URL and get the content of the website. Will this be useful as this is finding DOM in the HTML templates?. I am getting everything in Angular Controller and can see DOM of external URL , what i want to do now is just get specific Form ID and display in my page. Is this something you can help me with please?

New Dev Over a year ago

That sounds like a separate question and probably needs more details. Short of that, you could follow the concepts in my answer to solve this case.

GeekOnGadgets Over a year ago

yup, I have been trying but only problem is could not get the Form displayed from controller to view. Thanks for your help :)

|

Collectives™ on Stack Overflow

Load specific div in iframe from external site in AngularJs

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related