Edge Animate: how to move javascript into html?

Question

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?

score 0 · Answer 1 · edited Apr 18 '16 at 07:47

0

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>

edited Apr 18 '16 at 07:47

Mr Lister

45,515
15
108
150

answered Apr 10 '16 at 15:27

Klajbar

131
2
12

That is not what I want, yet another external js file. Edge now uses AdobeEdge.loadComposition ('test', ... to load its file test_edge.js which Edge creates upon publishing. That file too I wish to embed in my html file. Next to using base24 for the images I also wish that file to be embedded into my html file. What I want to end up with is one single html file that contains everyting, the base24 for the images, edge.6.0.0.min.js AND the test_edge.js code – jiggy1965 Apr 11 '16 at 09:38
Please check out, edited the content. I hope this is what you want. – Klajbar Apr 11 '16 at 16:26
Already tried that but that doesn't work. The AdobeEdge.loadComposition specifically looks for the test_edge.js file, not any inline content. The file it is looking for is mentioned as a parameter but without the '_edge.js' part. That's what makes it difficult. Somehow I need to have that loadCompostion load the inline content of test_edge.js instead of the external file itself. – jiggy1965 Apr 12 '16 at 07:18
I wish to have something like this: http://i.imgur.com/xSwJJNk.png But then make AdobeEdge.loadComposition load the contents of test_edge.js which is now between the script tags instead of searching for that external file (which I then can delete) – jiggy1965 Apr 12 '16 at 09:04
May I ask how to have `EDGE-102396420` please? I mean how to generate it? I read other posts, the number is different. Thank you. – Learner Nov 21 '18 at 01:55
@Learner It is generated by the Adobe Edge itself, to reference it in the html file. You can find a field name 'Composition ID' on the left side under the 'Stage' panel. – Klajbar Nov 25 '18 at 11:54

score 0 · Answer 2 · answered Jul 07 '16 at 14:21

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.

score 0 · Answer 3 · answered Oct 04 '16 at 03:58

0

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.

answered Oct 04 '16 at 03:58

Misha Rodshtein

11
1

score 0 · Answer 4 · edited Oct 27 '17 at 09:35

0

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>

edited Oct 27 '17 at 09:35

Vega

27,856
27
95
103

answered Oct 27 '17 at 09:31

Prem Chand

1
1

Mayank Sudden · Answer 5 · 2019-04-16T16:19:10.530

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

remove below line in liabrary(edge.6.0.0.min.js), search after beautify
"_edge.js?symbol=" +

4.+ "_edge.js"

save and embed in html (<script type="text/javascript" src="edge.6.0.0.min - Copy.js"></script>)
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.
use full name of file in AdobeEdge.loadComposition('728x90', 'EDGE-11479078', { Ex. AdobeEdge.loadComposition('728x90_edge.js', 'EDGE-11479078', {
Now upload all files html, images and two js files.
Now you can use macro for two js file and images.
It's working on Local and DFP.

Edge Animate: how to move javascript into html?

5 Answers5

Adobe Edge Embed js in html file

Follow the steps.