MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Help with inserting a script into a <div> element

    Scheduled Pinned Locked Moved Development
    11 Posts 5 Posters 3.0k Views 5 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ? Offline
      A Former User @AdamBD
      last edited by

      @adambd
      There are several ways to insert script after loading. Here are examples;

      //insert before other scripts
      var tag = document.createElement("script")
      tag.src = "EXTERNAL_SCRIPT_URL"
      var firstScriptTag = document.getElementsByTagName("script")[0]
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
      
      //insert after other scripts
      var tag = document.createElement("script");
      tag.src = "EXTERNAL_SCRIPT_URL";
      document.getElementsByTagName("head")[0].appendChild(tag);
      

      Or, You can make a HTML file which contains the target widget, and load it with iFrame.

      1 Reply Last reply Reply Quote 0
      • A Offline
        AdamBD
        last edited by

        Hi Sean, thanks for answering!

        tag.src = “EXTERNAL_SCRIPT_URL”;

        What should this point to? A local file on my machine?

        S 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @AdamBD
          last edited by

          @adambd EXTERNAL url = “https://some_server_com/etc/whatever.js”

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          A 1 Reply Last reply Reply Quote 0
          • A Offline
            AdamBD @sdetweil
            last edited by

            @sdetweil Hey sean, But then I need to have a ‘server’ running to pull this in. I would prefer just to keep it in another node file in the project. any thoughts on how to do that?

            ? S 2 Replies Last reply Reply Quote 0
            • ? Offline
              A Former User @AdamBD
              last edited by

              @adambd
              How about trying this?
              [card:eouia/MMM-Widget]

              Mykle1M justjim1220J 2 Replies Last reply Reply Quote 2
              • S Offline
                sdetweil @AdamBD
                last edited by

                @adambd if you look at the MMM_ImagedPhotos and MMM_ImageSlideshow modules, you will see they map a url for the express server running in MM

                	extraRoutes: function() {
                		var self = this;
                
                		this.expressApp.get("/MMM-ImagesPhotos/photos", function(req, res) {
                			self.getPhotosImages(req, res);
                		});
                
                		this.expressApp.use("/MMM-ImagesPhotos/photo", express.static(self.path_images));
                	},
                
                	// return photos-images by response in JSON format.
                	getPhotosImages: function(req, res) {
                		directoryImages = this.path_images;
                		var imagesPhotos = this.getImages(this.getFiles(directoryImages)).map(function (img) {
                			return {url: "/MMM-ImagesPhotos/photo/" + img};
                		})
                		res.send(imagesPhotos);
                	},
                
                

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • justjim1220J Offline
                  justjim1220 Module Developer @AdamBD
                  last edited by

                  @adambd

                  element.innerHTML =  `<div>     ENTER HTML CODE    </div>`
                  

                  you have to have the ` before and after the div indicators

                  the key to the left of the 1 key

                  "Life's Too Short To Dance With Ugly People"
                  Jim Hallock - 1995

                  1 Reply Last reply Reply Quote 0
                  • Mykle1M Offline
                    Mykle1 Project Sponsor Module Developer @Guest
                    last edited by

                    @sean

                    You could not have made it any easier. Fantastic idea, sean!

                    Create a working config
                    How to add modules

                    1 Reply Last reply Reply Quote 0
                    • justjim1220J Offline
                      justjim1220 Module Developer @Guest
                      last edited by

                      @sean

                      The only problem with this widget module… It doesn’t allow clickable links to be clicked…
                      Otherwise, It’s pretty cool! :smiling_face_with_sunglasses:

                      "Life's Too Short To Dance With Ugly People"
                      Jim Hallock - 1995

                      Mykle1M 1 Reply Last reply Reply Quote 0
                      • Mykle1M Offline
                        Mykle1 Project Sponsor Module Developer @justjim1220
                        last edited by

                        @justjim1220 said in Help with inserting a script into a <div> element:

                        It doesn’t allow clickable links to be clicked…

                        Most people don’t use a mouse with their mirrors

                        Create a working config
                        How to add modules

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy