• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 2.8k 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 Sep 28, 2018, 6:45 AM

    @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 Sep 28, 2018, 6:39 PM

      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 Sep 28, 2018, 6:48 PM Reply Quote 0
      • S Offline
        sdetweil @AdamBD
        last edited by Sep 28, 2018, 6:48 PM

        @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 Sep 28, 2018, 6:51 PM Reply Quote 0
        • A Offline
          AdamBD @sdetweil
          last edited by Sep 28, 2018, 6:51 PM

          @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 Sep 28, 2018, 7:06 PM Reply Quote 0
          • ? Offline
            A Former User @AdamBD
            last edited by Sep 28, 2018, 7:06 PM

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

            M J 2 Replies Last reply Sep 28, 2018, 11:33 PM Reply Quote 2
            • S Offline
              sdetweil @AdamBD
              last edited by Sep 28, 2018, 7:30 PM

              @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
              • J Offline
                justjim1220 Module Developer @AdamBD
                last edited by Sep 28, 2018, 9:12 PM

                @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
                • M Offline
                  Mykle1 Project Sponsor Module Developer @Guest
                  last edited by Sep 28, 2018, 11:33 PM

                  @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
                  • J Offline
                    justjim1220 Module Developer @Guest
                    last edited by Sep 28, 2018, 11:35 PM

                    @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

                    M 1 Reply Last reply Sep 29, 2018, 12:09 AM Reply Quote 0
                    • M Offline
                      Mykle1 Project Sponsor Module Developer @justjim1220
                      last edited by Sep 29, 2018, 12:09 AM

                      @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
                      1 / 2
                      • First post
                        6/11
                        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