Edge动画:如何将javascript移动到html中

Edge Animate: how to move javascript into html?

本文关键字：移动 html javascript 动画 Edge      更新时间：2024-03-10

我需要在Edge Animate中创建一个独立的html横幅。为此，我已经将图像编码为base24。我只需要将javascript包含在html中。当我发布横幅时，Edge默认情况下会添加一个"Edge_includes"文件夹，其中包含"Edge.60.0.min.js"和一个与html文件位于同一位置的javascript文件，该文件与html文件调用相同，但扩展名为"_Edge.js"。例如"text_edge.js"。这两个.js文件都需要移动到已发布的html文件中。

"edge.6.0.0.min.js"文件我可以很容易地移动，只要在提到.js文件的html文件的脚本标记之间移动它的脚本。

然而，test_edge.js文件比较困难。一个典型的已发布html文件包含以下内容：

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

我想，这就是Edge通过"loadComposition"加载"test_Edge.js"文件的地方。但是，我如何将test_edge.js文件的内容复制到我的html文件中呢？例如，我无法将"test"替换为"test_edge.js"的内容。有没有其他方法可以将该文件的内容加载到我的html文件中？例如，通过在脚本标记之间处理它，并使loadComposition加载脚本部分，而不是外部test_edge.js文件？

这可能很奇怪，但如果您只将js放在<script>标记中，它应该会起作用。标题应该是这样的：

<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>

另外，不要忘记在<body>部分中创建类本身

<div class="EDGE-102396420"></div>

有一个类似的问题，想将js集成到一个html中，但我无法在边缘运行时本身进行一些调整，所以不幸的是，它会破坏adobe提供的cdn速度。但除此之外，该方法与@Klajbar给出的答案相似。如果您在边缘运行时内部进行检查，以确保与其他文件的兼容性，则需要边缘运行时

我所做的是在loadComposition中添加一个变量，然后将具有f.load（a+"_edge.js"）的调用封装在if语句中，以确保is在没有变量的情况下运行（如果需要的话）。摘录自修改的edge.runtime.js示例

  //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");
    }

完成后，您可以将代码包含在同一个html中，首先加载运行时，然后加载Composition块，然后加载_edge.js代码。示例：

<!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>

我只是用它来加载一个_edge.js，如果你选择包括预加载的东西，我还没有测试。

只需将*_edge.js放在运行时js之后
运行时js搜索超时函数=10秒。
将其更改为0秒，运行时将立即启动动画加载
但您仍然会在控制台中错误地加载*_edge.js。这并不那么重要。

放置test_edge.js文件所在文件夹的绝对路径。

例如test_edge.js文件位于/b/c文件夹下，然后是

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

Adobe Edge在html文件中嵌入js

当您看到edge html文件时。有两个js和图像。这两个js都是外部调用的。一个是库，另一个是名为js-ex.（728x90_edge.js）的函数现在，当上传DFP类型自定义的所有文件时，您可以在这个js中使用728x90_edge.js和所有图像src的宏。然后介绍如何对图像使用宏。这是一个挑战。因此，您必须将这个js嵌入到html中。然后您将对图像使用宏。

按照步骤操作

1、下载liabrary js

  1. 删除liabrary中的下线（edge.60.0.min.js），在美化后搜索

  2. "_edge.js？symbol="+

4.+"_edge.js"

  1. 保存并嵌入到html (<script type="text/javascript" src="edge.6.0.0.min - Copy.js"></script>) 中

  2. 在loadComposition函数关闭</script>之后，从728x90_edge.js中剪切所有代码并嵌入到html中现在728x90_edge.js将为空，它仅用于加载。

  3. 使用AdobeEdge.loadComposition中文件的全名（'728x90'，'EDGE-11479078'{例如AdobeEdge.loadComposition（'728x90_edge.js'，'edge-11479078'，｛

  4. 现在上传所有文件html，图片和两个js文件。

  5. 现在您可以对两个js文件和图像使用macro。

  6. 它正在处理本地和DFP。

相关文章：