DEVHIDE
Login Or Sign up

Edge Animate: how to move javascript into html?

1.6k Views Asked by At

I need to create a self-contained html banner in Edge Animate. For this I have already encoded the images to base24. I just need to include the javascript into that html. When I publish my banner, Edge by default adds a 'edge_includes' folder which contains 'edge.6.0.0.min.js' and a javascript file in the same location as the html file which is called the same as the html file but with a '_edge.js' extention. Like for example 'text_edge.js'. Both .js files need to be moved to the published html file.

The 'edge.6.0.0.min.js' file I can move easily enough by moving it's script between the script tags of the html file which mentions that .js file.

The test_edge.js file however is more difficult. A typical published html file contains this amongst others:

<script>    AdobeEdge.loadComposition('test', 'EDGE-102396420', {
    scaleToFit: "none",
    centerStage: "none",
    minW: "0px",
    maxW: "undefined",
    width: "300px",
    height: "250px" }, {"dom":{}}, {"dom":{}}); 
</script>

This is - I guess - where Edge loads that 'test_edge.js' file, through 'loadComposition'. But how can I copy the contents of that test_edge.js file into my html file then? I can't replace 'test' with the contents of 'test_edge.js' for example. Is there some other way to load that file's content into my html file? By coping it between script tags and making loadComposition load that scripted part instead of the external test_edge.js file for example?

javascript html adobe-edge
Original Q&A
5

There are 5 best solutions below

6
Klajbar On

It might be strange, but it should work if you just put the js inside the <script> tags. The header should look something like this:

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
   <title>Untitled</title>
   <!--Adobe Edge Runtime-->
   <style>
       .edgeLoad-EDGEK-472634723 { visibility:hidden; }
   </style>
   <script>
      //Here goes the whole content from the test_edge.js
      //Just ctrl+C and ctrl+V everything from it
   </script>
   <script>
      //Here goes the whole content from the edge.6.0.0.min.js
      //Just ctrl+C and ctrl+V everything from it
   </script>
   <script>
      //Here goes the AdobeEdge.loadComposition stuff...
   </script>
</head>

And also don't forget to create the class itself inside the <body> part

<div class="EDGE-102396420"></div>
0
exaviore On

Had a similar issue wanted to integrating js into one html, but I couldn't get it to work wihtout some tweaking in the edge runtime itself, so unfortunately it'll ruin the cdn speed adobe gives you. But otherwise the approach is similar to the answer given by @Klajbar. If you make a check inside the edge runtime to can ensure compatibility with other files the requires edge runtime

What I did was to add a variable in loadComposition and then encapsulate the call which has f.load(a + "_edge.js") in a if statement to make sure is runs without the variable if need be. Excerpt from modified edge.runtime.js example 

  //added inline as last variable
   loadComposition: function(a, b, c, g, m,inline) {
    function n(a, g) {
        W(function() {
            var m =
                d("." + b),
                k = /px|^0$/,
                n = c.scaleToFit,
                e = c.centerStage,
                h = c.minW,
                f = c.maxW,
                l = c.width,
                s = c.height,
                y = m[0] || document.getElementsByTagName("body")[0];
            "absolute" != y.style.position && "relative" != y.style.position && (y.style.position = "relative");
            s && (y.style.height = s);
            l && (y.style.width = l);
            /^height$|^width$|^both$/.test(n) && (h = k.test(h) ? parseInt(h, 10) : void 0, f = k.test(f) ? parseInt(f, 10) : void 0, v(d(y), n, h, f, !1, c.bScaleToParent));
            /^vertical$|^horizontal$|^both$/.test(e) && t(y, e);
            a && L(H[b], null, a.dom, a.style, m[0], g + b);
            m.removeClass("edgeLoad-" +
                b)
        })
    }

    /** removed some code here just for legibility **/

   //if statement to override loading js files
    if(!inline){
         ba ? (window.edge_authoring_mode || 
        (g ? (f.definePreloader(g), e()) : f.load(a + "_edgePreload.js", e)), a && (c && c.bootstrapLoading ? ka.push(a) : window.edge_authoring_mode && c.sym ? f.load(a +
        "_edge.js?symbol=" + c.sym) : f.load(a + "_edge.js"))) : window.edge_authoring_mode || 
        (m ? (f.defineDownLevelStage(m), h()) : f.load(a + "_edgePreload.js", h))
        f.load(a + "_edge.js");
    }

Once that's done you can include the code into the same html, where runtime is loaded first, then loadComposition block, then the _edge.js code. Example:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>Untitled</title>

    <script>
        //modified edge.runtime.js file
    </script>


    <style>
        .edgeLoad-EDGE-24658395 { visibility:hidden; }
    </style>


<script>
   AdobeEdge.loadComposition('jem%26fix_afrens_930x180_uge14', 'EDGE-24658395', {
    scaleToFit: "none",
    centerStage: "none",
    minW: "0px",
    maxW: "undefined",
    width: "930px",
    height: "180px"
}, {"dom":{}}, {"style":{"${symbolSelector}":{"isStage":"true","rect":["undefined","undefined","960px","180px"]}},"dom":{}},true);
   //notice appeded boolean value as the end to enable the override.
</script>
<!--Adobe Edge Runtime End-->

    <script id="test">
    // contents of _edge.js file    
    </script>

</head>
<body style="margin:0;padding:0;">
    <div id="Stage" class="EDGE-24658395">
    </div>
</body>
</html>

I just used it for loading just one _edge.js and haven't tested if you choose including the preloading stuff.

0
Misha Rodshtein On

Just put you *_edge.js after runtime js.
In runtime js search for timeout function = 10 sec.
Change this to 0 sec, and runtime will start your animate at once load.
But you still will have error load *_edge.js in console. It is not so important.

0
Prem Chand On

Put absolute path of the folder where the test_edge.js file is present.

For example test_edge.js file is under a/b/c folder then

<script>    AdobeEdge.loadComposition('/a/b/c/test', 'EDGE-102396420', {
    scaleToFit: "none",
    centerStage: "none",
    minW: "0px",
    maxW: "undefined",
    width: "300px",
    height: "250px" }, {"dom":{}}, {"dom":{}}); 
</script>
0
Mayank Sudden On

Adobe Edge Embed js in html file

When you see edge html files. There are two js and images. Both js are externally called. One is library and second is function called js ex.(728x90_edge.js) Now, when upload all files in DFP type custom, then you use macro for 728x90_edge.js and all images src in this js. Then how to use macro for images. That is challenge. So you will have to embed this js in html. then you will use macro for images.

Follow the steps.

1, download liabrary js

  1. remove below line in liabrary(edge.6.0.0.min.js), search after beautify

  2. "_edge.js?symbol=" +

4.+ "_edge.js"

  1. save and embed in html (<script type="text/javascript" src="edge.6.0.0.min - Copy.js"></script>)

  2. cut all code from 728x90_edge.js and embed in html, after end of loadComposition function closing </script> Now 728x90_edge.js will be empty, it's only use for loading.

  3. use full name of file in AdobeEdge.loadComposition('728x90', 'EDGE-11479078', { Ex. AdobeEdge.loadComposition('728x90_edge.js', 'EDGE-11479078', {

  4. Now upload all files html, images and two js files.

  5. Now you can use macro for two js file and images.

  6. It's working on Local and DFP.

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ADOBE-EDGE

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Popular Questions

.

Copyright © 2021 Jogjafile Inc.