Incorporating an external JavaScript file using document.write within an AngularJS application

Question

Incorporating an external JavaScript file using document.write within an AngularJS application

I am facing an issue with an external JavaScript file (Ad file) that contains a document.write() function. I attempted to load it using $http and then inject it into a document.createElement, but the Ad server does not support this method.

Furthermore, I tried utilizing ng-include in a script, but unfortunately, it did not work as expected.

My goal is to successfully load and run the script within the file. Does anyone have any suggestions on how to achieve this?

The code

<script ng-src=""></script>

also proved to be unsuccessful in executing the script.

Your help would be greatly appreciated. Thank you.

javascript angularjs document.write

Answer 1

Answer №1

For those incorporating jQuery (as it appears you may be), there exists a specific function for this task:

$.getScript("http://my/script/url.js");

Answer 2

For those incorporating jQuery (as it appears you may be), there exists a specific function for this task:

$.getScript("http://my/script/url.js");

Answer 3

Answer №2

My friend Dennis and I collaborated on creating a directive that perfectly addressed my needs. Hopefully, this code snippet can also benefit someone else in a similar situation.

(function() {
    'use strict';

    angular
        .module('app')
        .directive('emediateScript', emediateScript);

    /* @ngInject */
    function emediateScript(Ad, $http) {
        var directive = {
            link: link,
            restrict: 'E',
            scope: {
                ad: '=ad',
            }
        };

        return directive;

        function link(scope, element, attrs){

            var _el = angular.element(element);

            var url = 'http://www.http.com';

            var request = {
                method: 'GET',
                url: url,
                headers: {
                    'X-Authentication': undefined
                }
            };

            if (url) {
                $http(request).then(function(response) {
                    var html = response.data.substr(16);
                    html = html.substring(0, html.length - 4);
                    _el.html(html);
                });
            }

        };
    };
})();

Here is the accompanying HTML:

<emediate-script></emediate-script>

Answer 4

My friend Dennis and I collaborated on creating a directive that perfectly addressed my needs. Hopefully, this code snippet can also benefit someone else in a similar situation.

(function() {
    'use strict';

    angular
        .module('app')
        .directive('emediateScript', emediateScript);

    /* @ngInject */
    function emediateScript(Ad, $http) {
        var directive = {
            link: link,
            restrict: 'E',
            scope: {
                ad: '=ad',
            }
        };

        return directive;

        function link(scope, element, attrs){

            var _el = angular.element(element);

            var url = 'http://www.http.com';

            var request = {
                method: 'GET',
                url: url,
                headers: {
                    'X-Authentication': undefined
                }
            };

            if (url) {
                $http(request).then(function(response) {
                    var html = response.data.substr(16);
                    html = html.substring(0, html.length - 4);
                    _el.html(html);
                });
            }

        };
    };
})();

Here is the accompanying HTML:

<emediate-script></emediate-script>

Answer 5

Answer №3

Have you considered using jqLite to generate a <script> tag?

$('body').append('<script type="application/javascript" src="http://localhost/test.js"></script>');

I've found that this method works flawlessly with my test script.

Answer 6

Have you considered using jqLite to generate a <script> tag?

$('body').append('<script type="application/javascript" src="http://localhost/test.js"></script>');

I've found that this method works flawlessly with my test script.

Incorporating an external JavaScript file using document.write within an AngularJS application

Answer №1

Answer №2

Answer №3

Similar questions

What's the best method for uploading a file to AWS S3: POST or PUT requests?

Angular Dynamic CSS Library by BPNM

Making an "associated" route the active route within Aurelia

AngularJS uses the syntax `Track by $index` to keep track

Reorder the cases and returns in Vue/Javascript for improved functionality

How can I use a string argument in JavaScript to sort an array of objects by that specific value?

Preventing the "save" button from being enabled until a change has been made to at least one input field

JavaScript Variables Lose Their Values

The base64 conversion for the image is overflowing from the upload image field in react-draft-wysiwyg

What could be the reason behind the app.get middleware not functioning properly following the app.use middleware in ExpressJS?

What is the best way to implement a callback for an asynchronous HTTP service in Angular, ensuring that my controller's array remains populated and not undefined?

What is the reason for Vue regular slots being accessible in this.$scopedSlots?

When the browser back button is clicked, conceal the current div and reveal the previously hidden div

Add a fresh widget to the DOJO attachment point without overwriting

Does MeteorJS cache files in the node_modules directory?

Removing an item from an array while also updating one of its attributes in JavaScript

Efficiently transferring time values from dynamically created list items to an input box using JavaScript

Navigating to a specific div on page load with pjax enabled

Troubles encountered with jQuery validate plugin in ASP.NET controls functionality

What could be causing the compatibility issue between chart.js and AngularJS?