动态创建JavaScript处理程序_Javascript

动态创建JavaScript处理程序

javascript

动态创建JavaScript处理程序,javascript,Javascript,我试图在动态中创建这些事件处理程序 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Synchronized Viewers</title&g

我试图在动态中创建这些事件处理程序

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Synchronized Viewers</title>
  <style>
    .seadragon-viewer {
      display: inline-block;
      width: 45%;
      height: 600px;
    }
  </style>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>



  <script>
    // Define our image
    var duomo = {
      Image: {
        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
        Format: "jpg",
        Overlap: "2",
        TileSize: "256",
        Size: {
          Width: "13920",
          Height: "10200"
        }
      }
    };

    // Create osd viewer
    function createViewer(id, tileSources) {
      return OpenSeadragon({
        id: id,
        prefixUrl: "//openseadragon.github.io/openseadragon/images/",
        tileSources: tileSources
      });
    }

    // Create obj with props
    function createViewerObj(viewer) {
      return {
        id: viewer.id,
        isLeading: false,
        viewer: viewer
      }
    }

    // Now create the viewers

$(function(){

  function dynamic_createView(arrViews){

    var htmlContent="";

    for (var i = 0; i < arrViews.length; i++) {
      htmlContent+='<div id="'+arrViews[i]+'" class="seadragon-viewer"></div>';
    }


    $("#mainView")[0].innerHTML=htmlContent;


    for (var i = 0; i < arrViews.length; i++) {
      window[arrViews[i]]= createViewer(arrViews[i],duomo);
    }    

    var objArray= [];

    for (var i = 0; i < arrViews.length; i++) {
      objArray[i]=createViewerObj(window[arrViews[i]]);
    }



    // We need a viewer handler for each viewer
    var viewerHandler = function (activeViewer, objArray) {

      var theOthers = [];

      for (var i = 0; i < objArray.length; i++) {
        if (activeViewer.id !== objArray[i].id) {
          theOthers.push(objArray[i]);
        }
      }
      // OK, now I have an array of everything but the "active" viewer.

      for (var i = 0; i < theOthers.length; i++) {
        // If any other viewer is leading, return.
        if (theOthers[i].isLeading) {
          return;
        }
      }

      activeViewer.isLeading = true; // Turn on.
      objArray.forEach(function (obj) {
        // Set viewport for all viewers
        obj.viewer.viewport.zoomTo(activeViewer.viewport.getZoom());
        obj.viewer.viewport.panTo(activeViewer.viewport.getCenter());
      });
      activeViewer.isLeading = false; // Turn off.
    };

    // Add handlers
    objArray.forEach(function (obj) {
      // When Viewer i is zooming we want Viewer i to lead
      obj.viewer.addHandler('zoom', viewerHandler(obj.viewer, objArray));
      // When Viewer i is panning we want Viewer i to lead
      obj.viewer.addHandler('pan', viewerHandler(obj.viewer, objArray));
    });
  }


dynamic_createView(["viewer1","viewer2","viewer3"]);

});

  </script>
</head>

<body>
  <div id="mainView"></div>


</body>

</html>

有两个查看器，每个查看器都有一个处理程序。如果我想要4个观众呢？我必须一遍又一遍地重复代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Synchronized Viewers</title>
  <style>
    .seadragon-viewer {
      display: inline-block;
      width: 45%;
      height: 600px;
    }
  </style>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>



  <script>
    // Define our image
    var duomo = {
      Image: {
        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
        Format: "jpg",
        Overlap: "2",
        TileSize: "256",
        Size: {
          Width: "13920",
          Height: "10200"
        }
      }
    };

    // Create osd viewer
    function createViewer(id, tileSources) {
      return OpenSeadragon({
        id: id,
        prefixUrl: "//openseadragon.github.io/openseadragon/images/",
        tileSources: tileSources
      });
    }

    // Create obj with props
    function createViewerObj(viewer) {
      return {
        id: viewer.id,
        isLeading: false,
        viewer: viewer
      }
    }

    // Now create the viewers

$(function(){

  function dynamic_createView(arrViews){

    var htmlContent="";

    for (var i = 0; i < arrViews.length; i++) {
      htmlContent+='<div id="'+arrViews[i]+'" class="seadragon-viewer"></div>';
    }


    $("#mainView")[0].innerHTML=htmlContent;


    for (var i = 0; i < arrViews.length; i++) {
      window[arrViews[i]]= createViewer(arrViews[i],duomo);
    }    

    var objArray= [];

    for (var i = 0; i < arrViews.length; i++) {
      objArray[i]=createViewerObj(window[arrViews[i]]);
    }



    // We need a viewer handler for each viewer
    var viewerHandler = function (activeViewer, objArray) {

      var theOthers = [];

      for (var i = 0; i < objArray.length; i++) {
        if (activeViewer.id !== objArray[i].id) {
          theOthers.push(objArray[i]);
        }
      }
      // OK, now I have an array of everything but the "active" viewer.

      for (var i = 0; i < theOthers.length; i++) {
        // If any other viewer is leading, return.
        if (theOthers[i].isLeading) {
          return;
        }
      }

      activeViewer.isLeading = true; // Turn on.
      objArray.forEach(function (obj) {
        // Set viewport for all viewers
        obj.viewer.viewport.zoomTo(activeViewer.viewport.getZoom());
        obj.viewer.viewport.panTo(activeViewer.viewport.getCenter());
      });
      activeViewer.isLeading = false; // Turn off.
    };

    // Add handlers
    objArray.forEach(function (obj) {
      // When Viewer i is zooming we want Viewer i to lead
      obj.viewer.addHandler('zoom', viewerHandler(obj.viewer, objArray));
      // When Viewer i is panning we want Viewer i to lead
      obj.viewer.addHandler('pan', viewerHandler(obj.viewer, objArray));
    });
  }


dynamic_createView(["viewer1","viewer2","viewer3"]);

});

  </script>
</head>

<body>
  <div id="mainView"></div>


</body>

</html>

因此，与其这样做，不如：

var viewer1Leading = false;
var viewer2Leading = false;

var viewer1Handler = function() {
  if (viewer2Leading) {
    return;
  }

  viewer1Leading = true;
  viewer2.viewport.zoomTo(viewer1.viewport.getZoom());
  viewer2.viewport.panTo(viewer1.viewport.getCenter());
  viewer1Leading = false;
};

var viewer2Handler = function() {
  if (viewer1Leading) {
    return;
  }

  viewer2Leading = true;
  viewer1.viewport.zoomTo(viewer2.viewport.getZoom());
  viewer1.viewport.panTo(viewer2.viewport.getCenter());
  viewer2Leading = false;
};

viewer1.addHandler('zoom', viewer1Handler);
viewer2.addHandler('zoom', viewer2Handler);
viewer1.addHandler('pan', viewer1Handler);
viewer2.addHandler('pan', viewer2Handler);

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Synchronized Viewers</title>
  <style>
    .seadragon-viewer {
      display: inline-block;
      width: 45%;
      height: 600px;
    }
  </style>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>



  <script>
    // Define our image
    var duomo = {
      Image: {
        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
        Format: "jpg",
        Overlap: "2",
        TileSize: "256",
        Size: {
          Width: "13920",
          Height: "10200"
        }
      }
    };

    // Create osd viewer
    function createViewer(id, tileSources) {
      return OpenSeadragon({
        id: id,
        prefixUrl: "//openseadragon.github.io/openseadragon/images/",
        tileSources: tileSources
      });
    }

    // Create obj with props
    function createViewerObj(viewer) {
      return {
        id: viewer.id,
        isLeading: false,
        viewer: viewer
      }
    }

    // Now create the viewers

$(function(){

  function dynamic_createView(arrViews){

    var htmlContent="";

    for (var i = 0; i < arrViews.length; i++) {
      htmlContent+='<div id="'+arrViews[i]+'" class="seadragon-viewer"></div>';
    }


    $("#mainView")[0].innerHTML=htmlContent;


    for (var i = 0; i < arrViews.length; i++) {
      window[arrViews[i]]= createViewer(arrViews[i],duomo);
    }    

    var objArray= [];

    for (var i = 0; i < arrViews.length; i++) {
      objArray[i]=createViewerObj(window[arrViews[i]]);
    }



    // We need a viewer handler for each viewer
    var viewerHandler = function (activeViewer, objArray) {

      var theOthers = [];

      for (var i = 0; i < objArray.length; i++) {
        if (activeViewer.id !== objArray[i].id) {
          theOthers.push(objArray[i]);
        }
      }
      // OK, now I have an array of everything but the "active" viewer.

      for (var i = 0; i < theOthers.length; i++) {
        // If any other viewer is leading, return.
        if (theOthers[i].isLeading) {
          return;
        }
      }

      activeViewer.isLeading = true; // Turn on.
      objArray.forEach(function (obj) {
        // Set viewport for all viewers
        obj.viewer.viewport.zoomTo(activeViewer.viewport.getZoom());
        obj.viewer.viewport.panTo(activeViewer.viewport.getCenter());
      });
      activeViewer.isLeading = false; // Turn off.
    };

    // Add handlers
    objArray.forEach(function (obj) {
      // When Viewer i is zooming we want Viewer i to lead
      obj.viewer.addHandler('zoom', viewerHandler(obj.viewer, objArray));
      // When Viewer i is panning we want Viewer i to lead
      obj.viewer.addHandler('pan', viewerHandler(obj.viewer, objArray));
    });
  }


dynamic_createView(["viewer1","viewer2","viewer3"]);

});

  </script>
</head>

<body>
  <div id="mainView"></div>


</body>

</html>

我希望能够做到这一点：

// Our array of viewers
let objArray = [createViewerObj(viewer1), createViewerObj(viewer2)];

// We need a viewer handler for each viewer
let viewerHandler = function (activeViewer, objArray) {

  let theOthers = [];

  for (let i = 0; i < objArray.length; i++) {
    if (activeViewer.id !== objArray[i].id) {
      theOthers.push(objArray[i]);
    }
  }
  // OK, now I have an array of everything but the "active" viewer.

  for (let i = 0; i < theOthers.length; i++) {
    // If any other viewer is leading, return.
    if (theOthers[i].isLeading) {
      return;
    }
  }

  activeViewer.isLeading = true; // Turn on.
  objArray.forEach(function (obj) {
    // Set viewport for all viewers
    obj.viewer.viewport.zoomTo(activeViewer.viewport.getZoom());
    obj.viewer.viewport.panTo(activeViewer.viewport.getCenter());
  });
  activeViewer.isLeading = false; // Turn off.
};

// Add handlers
objArray.forEach(function (obj) {
  // When Viewer i is zooming we want Viewer i to lead
  obj.viewer.addHandler('zoom', viewerHandler(obj.viewer, objArray));
  // When Viewer i is panning we want Viewer i to lead
  obj.viewer.addHandler('pan', viewerHandler(obj.viewer, objArray));
});

// Create obj with props
function createViewerObj(viewer) {
  return {
    id: viewer.id,
    isLeading: false,
    viewer: viewer
  }
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Synchronized Viewers</title>
  <style>
    .seadragon-viewer {
      display: inline-block;
      width: 45%;
      height: 600px;
    }
  </style>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>



  <script>
    // Define our image
    var duomo = {
      Image: {
        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
        Format: "jpg",
        Overlap: "2",
        TileSize: "256",
        Size: {
          Width: "13920",
          Height: "10200"
        }
      }
    };

    // Create osd viewer
    function createViewer(id, tileSources) {
      return OpenSeadragon({
        id: id,
        prefixUrl: "//openseadragon.github.io/openseadragon/images/",
        tileSources: tileSources
      });
    }

    // Create obj with props
    function createViewerObj(viewer) {
      return {
        id: viewer.id,
        isLeading: false,
        viewer: viewer
      }
    }

    // Now create the viewers

$(function(){

  function dynamic_createView(arrViews){

    var htmlContent="";

    for (var i = 0; i < arrViews.length; i++) {
      htmlContent+='<div id="'+arrViews[i]+'" class="seadragon-viewer"></div>';
    }


    $("#mainView")[0].innerHTML=htmlContent;


    for (var i = 0; i < arrViews.length; i++) {
      window[arrViews[i]]= createViewer(arrViews[i],duomo);
    }    

    var objArray= [];

    for (var i = 0; i < arrViews.length; i++) {
      objArray[i]=createViewerObj(window[arrViews[i]]);
    }



    // We need a viewer handler for each viewer
    var viewerHandler = function (activeViewer, objArray) {

      var theOthers = [];

      for (var i = 0; i < objArray.length; i++) {
        if (activeViewer.id !== objArray[i].id) {
          theOthers.push(objArray[i]);
        }
      }
      // OK, now I have an array of everything but the "active" viewer.

      for (var i = 0; i < theOthers.length; i++) {
        // If any other viewer is leading, return.
        if (theOthers[i].isLeading) {
          return;
        }
      }

      activeViewer.isLeading = true; // Turn on.
      objArray.forEach(function (obj) {
        // Set viewport for all viewers
        obj.viewer.viewport.zoomTo(activeViewer.viewport.getZoom());
        obj.viewer.viewport.panTo(activeViewer.viewport.getCenter());
      });
      activeViewer.isLeading = false; // Turn off.
    };

    // Add handlers
    objArray.forEach(function (obj) {
      // When Viewer i is zooming we want Viewer i to lead
      obj.viewer.addHandler('zoom', viewerHandler(obj.viewer, objArray));
      // When Viewer i is panning we want Viewer i to lead
      obj.viewer.addHandler('pan', viewerHandler(obj.viewer, objArray));
    });
  }


dynamic_createView(["viewer1","viewer2","viewer3"]);

});

  </script>
</head>

<body>
  <div id="mainView"></div>


</body>

</html>

//我们的查看器数组
让objArray=[createViewerObj（viewer1），createViewerObj（viewer2）]；
//每个查看器都需要一个查看器处理程序
让viewerHandler=函数（activeViewer，objArray）{
让其他人=[]；
for（设i=0；i


但它不起作用——观众不再同步
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Synchronized Viewers</title>
  <style>
    .seadragon-viewer {
      display: inline-block;
      width: 45%;
      height: 600px;
    }
  </style>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>



  <script>
    // Define our image
    var duomo = {
      Image: {
        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
        Format: "jpg",
        Overlap: "2",
        TileSize: "256",
        Size: {
          Width: "13920",
          Height: "10200"
        }
      }
    };

    // Create osd viewer
    function createViewer(id, tileSources) {
      return OpenSeadragon({
        id: id,
        prefixUrl: "//openseadragon.github.io/openseadragon/images/",
        tileSources: tileSources
      });
    }

    // Create obj with props
    function createViewerObj(viewer) {
      return {
        id: viewer.id,
        isLeading: false,
        viewer: viewer
      }
    }

    // Now create the viewers

$(function(){

  function dynamic_createView(arrViews){

    var htmlContent="";

    for (var i = 0; i < arrViews.length; i++) {
      htmlContent+='<div id="'+arrViews[i]+'" class="seadragon-viewer"></div>';
    }


    $("#mainView")[0].innerHTML=htmlContent;


    for (var i = 0; i < arrViews.length; i++) {
      window[arrViews[i]]= createViewer(arrViews[i],duomo);
    }    

    var objArray= [];

    for (var i = 0; i < arrViews.length; i++) {
      objArray[i]=createViewerObj(window[arrViews[i]]);
    }



    // We need a viewer handler for each viewer
    var viewerHandler = function (activeViewer, objArray) {

      var theOthers = [];

      for (var i = 0; i < objArray.length; i++) {
        if (activeViewer.id !== objArray[i].id) {
          theOthers.push(objArray[i]);
        }
      }
      // OK, now I have an array of everything but the "active" viewer.

      for (var i = 0; i < theOthers.length; i++) {
        // If any other viewer is leading, return.
        if (theOthers[i].isLeading) {
          return;
        }
      }

      activeViewer.isLeading = true; // Turn on.
      objArray.forEach(function (obj) {
        // Set viewport for all viewers
        obj.viewer.viewport.zoomTo(activeViewer.viewport.getZoom());
        obj.viewer.viewport.panTo(activeViewer.viewport.getCenter());
      });
      activeViewer.isLeading = false; // Turn off.
    };

    // Add handlers
    objArray.forEach(function (obj) {
      // When Viewer i is zooming we want Viewer i to lead
      obj.viewer.addHandler('zoom', viewerHandler(obj.viewer, objArray));
      // When Viewer i is panning we want Viewer i to lead
      obj.viewer.addHandler('pan', viewerHandler(obj.viewer, objArray));
    });
  }


dynamic_createView(["viewer1","viewer2","viewer3"]);

});

  </script>
</head>

<body>
  <div id="mainView"></div>


</body>

</html>

我还想让代码不那么笨重，但现在它更笨重了
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Synchronized Viewers</title>
  <style>
    .seadragon-viewer {
      display: inline-block;
      width: 45%;
      height: 600px;
    }
  </style>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>



  <script>
    // Define our image
    var duomo = {
      Image: {
        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
        Format: "jpg",
        Overlap: "2",
        TileSize: "256",
        Size: {
          Width: "13920",
          Height: "10200"
        }
      }
    };

    // Create osd viewer
    function createViewer(id, tileSources) {
      return OpenSeadragon({
        id: id,
        prefixUrl: "//openseadragon.github.io/openseadragon/images/",
        tileSources: tileSources
      });
    }

    // Create obj with props
    function createViewerObj(viewer) {
      return {
        id: viewer.id,
        isLeading: false,
        viewer: viewer
      }
    }

    // Now create the viewers

$(function(){

  function dynamic_createView(arrViews){

    var htmlContent="";

    for (var i = 0; i < arrViews.length; i++) {
      htmlContent+='<div id="'+arrViews[i]+'" class="seadragon-viewer"></div>';
    }


    $("#mainView")[0].innerHTML=htmlContent;


    for (var i = 0; i < arrViews.length; i++) {
      window[arrViews[i]]= createViewer(arrViews[i],duomo);
    }    

    var objArray= [];

    for (var i = 0; i < arrViews.length; i++) {
      objArray[i]=createViewerObj(window[arrViews[i]]);
    }



    // We need a viewer handler for each viewer
    var viewerHandler = function (activeViewer, objArray) {

      var theOthers = [];

      for (var i = 0; i < objArray.length; i++) {
        if (activeViewer.id !== objArray[i].id) {
          theOthers.push(objArray[i]);
        }
      }
      // OK, now I have an array of everything but the "active" viewer.

      for (var i = 0; i < theOthers.length; i++) {
        // If any other viewer is leading, return.
        if (theOthers[i].isLeading) {
          return;
        }
      }

      activeViewer.isLeading = true; // Turn on.
      objArray.forEach(function (obj) {
        // Set viewport for all viewers
        obj.viewer.viewport.zoomTo(activeViewer.viewport.getZoom());
        obj.viewer.viewport.panTo(activeViewer.viewport.getCenter());
      });
      activeViewer.isLeading = false; // Turn off.
    };

    // Add handlers
    objArray.forEach(function (obj) {
      // When Viewer i is zooming we want Viewer i to lead
      obj.viewer.addHandler('zoom', viewerHandler(obj.viewer, objArray));
      // When Viewer i is panning we want Viewer i to lead
      obj.viewer.addHandler('pan', viewerHandler(obj.viewer, objArray));
    });
  }


dynamic_createView(["viewer1","viewer2","viewer3"]);

});

  </script>
</head>

<body>
  <div id="mainView"></div>


</body>

</html>

有什么想法吗
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Synchronized Viewers</title>
  <style>
    .seadragon-viewer {
      display: inline-block;
      width: 45%;
      height: 600px;
    }
  </style>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>



  <script>
    // Define our image
    var duomo = {
      Image: {
        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
        Format: "jpg",
        Overlap: "2",
        TileSize: "256",
        Size: {
          Width: "13920",
          Height: "10200"
        }
      }
    };

    // Create osd viewer
    function createViewer(id, tileSources) {
      return OpenSeadragon({
        id: id,
        prefixUrl: "//openseadragon.github.io/openseadragon/images/",
        tileSources: tileSources
      });
    }

    // Create obj with props
    function createViewerObj(viewer) {
      return {
        id: viewer.id,
        isLeading: false,
        viewer: viewer
      }
    }

    // Now create the viewers

$(function(){

  function dynamic_createView(arrViews){

    var htmlContent="";

    for (var i = 0; i < arrViews.length; i++) {
      htmlContent+='<div id="'+arrViews[i]+'" class="seadragon-viewer"></div>';
    }


    $("#mainView")[0].innerHTML=htmlContent;


    for (var i = 0; i < arrViews.length; i++) {
      window[arrViews[i]]= createViewer(arrViews[i],duomo);
    }    

    var objArray= [];

    for (var i = 0; i < arrViews.length; i++) {
      objArray[i]=createViewerObj(window[arrViews[i]]);
    }



    // We need a viewer handler for each viewer
    var viewerHandler = function (activeViewer, objArray) {

      var theOthers = [];

      for (var i = 0; i < objArray.length; i++) {
        if (activeViewer.id !== objArray[i].id) {
          theOthers.push(objArray[i]);
        }
      }
      // OK, now I have an array of everything but the "active" viewer.

      for (var i = 0; i < theOthers.length; i++) {
        // If any other viewer is leading, return.
        if (theOthers[i].isLeading) {
          return;
        }
      }

      activeViewer.isLeading = true; // Turn on.
      objArray.forEach(function (obj) {
        // Set viewport for all viewers
        obj.viewer.viewport.zoomTo(activeViewer.viewport.getZoom());
        obj.viewer.viewport.panTo(activeViewer.viewport.getCenter());
      });
      activeViewer.isLeading = false; // Turn off.
    };

    // Add handlers
    objArray.forEach(function (obj) {
      // When Viewer i is zooming we want Viewer i to lead
      obj.viewer.addHandler('zoom', viewerHandler(obj.viewer, objArray));
      // When Viewer i is panning we want Viewer i to lead
      obj.viewer.addHandler('pan', viewerHandler(obj.viewer, objArray));
    });
  }


dynamic_createView(["viewer1","viewer2","viewer3"]);

});

  </script>
</head>

<body>
  <div id="mainView"></div>


</body>

</html>

修改代码笔
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Synchronized Viewers</title>
  <style>
    .seadragon-viewer {
      display: inline-block;
      width: 45%;
      height: 600px;
    }
  </style>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>



  <script>
    // Define our image
    var duomo = {
      Image: {
        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
        Format: "jpg",
        Overlap: "2",
        TileSize: "256",
        Size: {
          Width: "13920",
          Height: "10200"
        }
      }
    };

    // Create osd viewer
    function createViewer(id, tileSources) {
      return OpenSeadragon({
        id: id,
        prefixUrl: "//openseadragon.github.io/openseadragon/images/",
        tileSources: tileSources
      });
    }

    // Create obj with props
    function createViewerObj(viewer) {
      return {
        id: viewer.id,
        isLeading: false,
        viewer: viewer
      }
    }

    // Now create the viewers

$(function(){

  function dynamic_createView(arrViews){

    var htmlContent="";

    for (var i = 0; i < arrViews.length; i++) {
      htmlContent+='<div id="'+arrViews[i]+'" class="seadragon-viewer"></div>';
    }


    $("#mainView")[0].innerHTML=htmlContent;


    for (var i = 0; i < arrViews.length; i++) {
      window[arrViews[i]]= createViewer(arrViews[i],duomo);
    }    

    var objArray= [];

    for (var i = 0; i < arrViews.length; i++) {
      objArray[i]=createViewerObj(window[arrViews[i]]);
    }



    // We need a viewer handler for each viewer
    var viewerHandler = function (activeViewer, objArray) {

      var theOthers = [];

      for (var i = 0; i < objArray.length; i++) {
        if (activeViewer.id !== objArray[i].id) {
          theOthers.push(objArray[i]);
        }
      }
      // OK, now I have an array of everything but the "active" viewer.

      for (var i = 0; i < theOthers.length; i++) {
        // If any other viewer is leading, return.
        if (theOthers[i].isLeading) {
          return;
        }
      }

      activeViewer.isLeading = true; // Turn on.
      objArray.forEach(function (obj) {
        // Set viewport for all viewers
        obj.viewer.viewport.zoomTo(activeViewer.viewport.getZoom());
        obj.viewer.viewport.panTo(activeViewer.viewport.getCenter());
      });
      activeViewer.isLeading = false; // Turn off.
    };

    // Add handlers
    objArray.forEach(function (obj) {
      // When Viewer i is zooming we want Viewer i to lead
      obj.viewer.addHandler('zoom', viewerHandler(obj.viewer, objArray));
      // When Viewer i is panning we want Viewer i to lead
      obj.viewer.addHandler('pan', viewerHandler(obj.viewer, objArray));
    });
  }


dynamic_createView(["viewer1","viewer2","viewer3"]);

});

  </script>
</head>

<body>
  <div id="mainView"></div>


</body>

</html>

试一试
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Synchronized Viewers</title>
  <style>
    .seadragon-viewer {
      display: inline-block;
      width: 45%;
      height: 600px;
    }
  </style>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>



  <script>
    // Define our image
    var duomo = {
      Image: {
        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
        Format: "jpg",
        Overlap: "2",
        TileSize: "256",
        Size: {
          Width: "13920",
          Height: "10200"
        }
      }
    };

    // Create osd viewer
    function createViewer(id, tileSources) {
      return OpenSeadragon({
        id: id,
        prefixUrl: "//openseadragon.github.io/openseadragon/images/",
        tileSources: tileSources
      });
    }

    // Create obj with props
    function createViewerObj(viewer) {
      return {
        id: viewer.id,
        isLeading: false,
        viewer: viewer
      }
    }

    // Now create the viewers

$(function(){

  function dynamic_createView(arrViews){

    var htmlContent="";

    for (var i = 0; i < arrViews.length; i++) {
      htmlContent+='<div id="'+arrViews[i]+'" class="seadragon-viewer"></div>';
    }


    $("#mainView")[0].innerHTML=htmlContent;


    for (var i = 0; i < arrViews.length; i++) {
      window[arrViews[i]]= createViewer(arrViews[i],duomo);
    }    

    var objArray= [];

    for (var i = 0; i < arrViews.length; i++) {
      objArray[i]=createViewerObj(window[arrViews[i]]);
    }



    // We need a viewer handler for each viewer
    var viewerHandler = function (activeViewer, objArray) {

      var theOthers = [];

      for (var i = 0; i < objArray.length; i++) {
        if (activeViewer.id !== objArray[i].id) {
          theOthers.push(objArray[i]);
        }
      }
      // OK, now I have an array of everything but the "active" viewer.

      for (var i = 0; i < theOthers.length; i++) {
        // If any other viewer is leading, return.
        if (theOthers[i].isLeading) {
          return;
        }
      }

      activeViewer.isLeading = true; // Turn on.
      objArray.forEach(function (obj) {
        // Set viewport for all viewers
        obj.viewer.viewport.zoomTo(activeViewer.viewport.getZoom());
        obj.viewer.viewport.panTo(activeViewer.viewport.getCenter());
      });
      activeViewer.isLeading = false; // Turn off.
    };

    // Add handlers
    objArray.forEach(function (obj) {
      // When Viewer i is zooming we want Viewer i to lead
      obj.viewer.addHandler('zoom', viewerHandler(obj.viewer, objArray));
      // When Viewer i is panning we want Viewer i to lead
      obj.viewer.addHandler('pan', viewerHandler(obj.viewer, objArray));
    });
  }


dynamic_createView(["viewer1","viewer2","viewer3"]);

});

  </script>
</head>

<body>
  <div id="mainView"></div>


</body>

</html>

试试看这是我的方式
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Synchronized Viewers</title>
  <style>
    .seadragon-viewer {
      display: inline-block;
      width: 45%;
      height: 600px;
    }
  </style>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>



  <script>
    // Define our image
    var duomo = {
      Image: {
        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
        Format: "jpg",
        Overlap: "2",
        TileSize: "256",
        Size: {
          Width: "13920",
          Height: "10200"
        }
      }
    };

    // Create osd viewer
    function createViewer(id, tileSources) {
      return OpenSeadragon({
        id: id,
        prefixUrl: "//openseadragon.github.io/openseadragon/images/",
        tileSources: tileSources
      });
    }

    // Create obj with props
    function createViewerObj(viewer) {
      return {
        id: viewer.id,
        isLeading: false,
        viewer: viewer
      }
    }

    // Now create the viewers

$(function(){

  function dynamic_createView(arrViews){

    var htmlContent="";

    for (var i = 0; i < arrViews.length; i++) {
      htmlContent+='<div id="'+arrViews[i]+'" class="seadragon-viewer"></div>';
    }


    $("#mainView")[0].innerHTML=htmlContent;


    for (var i = 0; i < arrViews.length; i++) {
      window[arrViews[i]]= createViewer(arrViews[i],duomo);
    }    

    var objArray= [];

    for (var i = 0; i < arrViews.length; i++) {
      objArray[i]=createViewerObj(window[arrViews[i]]);
    }



    // We need a viewer handler for each viewer
    var viewerHandler = function (activeViewer, objArray) {

      var theOthers = [];

      for (var i = 0; i < objArray.length; i++) {
        if (activeViewer.id !== objArray[i].id) {
          theOthers.push(objArray[i]);
        }
      }
      // OK, now I have an array of everything but the "active" viewer.

      for (var i = 0; i < theOthers.length; i++) {
        // If any other viewer is leading, return.
        if (theOthers[i].isLeading) {
          return;
        }
      }

      activeViewer.isLeading = true; // Turn on.
      objArray.forEach(function (obj) {
        // Set viewport for all viewers
        obj.viewer.viewport.zoomTo(activeViewer.viewport.getZoom());
        obj.viewer.viewport.panTo(activeViewer.viewport.getCenter());
      });
      activeViewer.isLeading = false; // Turn off.
    };

    // Add handlers
    objArray.forEach(function (obj) {
      // When Viewer i is zooming we want Viewer i to lead
      obj.viewer.addHandler('zoom', viewerHandler(obj.viewer, objArray));
      // When Viewer i is panning we want Viewer i to lead
      obj.viewer.addHandler('pan', viewerHandler(obj.viewer, objArray));
    });
  }


dynamic_createView(["viewer1","viewer2","viewer3"]);

});

  </script>
</head>

<body>
  <div id="mainView"></div>


</body>

</html>


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Synchronized Viewers</title>
  <style>
    .seadragon-viewer {
      display: inline-block;
      width: 45%;
      height: 600px;
    }
  </style>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>



  <script>
    // Define our image
    var duomo = {
      Image: {
        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
        Format: "jpg",
        Overlap: "2",
        TileSize: "256",
        Size: {
          Width: "13920",
          Height: "10200"
        }
      }
    };

    // Create osd viewer
    function createViewer(id, tileSources) {
      return OpenSeadragon({
        id: id,
        prefixUrl: "//openseadragon.github.io/openseadragon/images/",
        tileSources: tileSources
      });
    }

    // Create obj with props
    function createViewerObj(viewer) {
      return {
        id: viewer.id,
        isLeading: false,
        viewer: viewer
      }
    }

    // Now create the viewers

$(function(){

  function dynamic_createView(arrViews){

    var htmlContent="";

    for (var i = 0; i < arrViews.length; i++) {
      htmlContent+='<div id="'+arrViews[i]+'" class="seadragon-viewer"></div>';
    }


    $("#mainView")[0].innerHTML=htmlContent;


    for (var i = 0; i < arrViews.length; i++) {
      window[arrViews[i]]= createViewer(arrViews[i],duomo);
    }    

    var objArray= [];

    for (var i = 0; i < arrViews.length; i++) {
      objArray[i]=createViewerObj(window[arrViews[i]]);
    }



    // We need a viewer handler for each viewer
    var viewerHandler = function (activeViewer, objArray) {

      var theOthers = [];

      for (var i = 0; i < objArray.length; i++) {
        if (activeViewer.id !== objArray[i].id) {
          theOthers.push(objArray[i]);
        }
      }
      // OK, now I have an array of everything but the "active" viewer.

      for (var i = 0; i < theOthers.length; i++) {
        // If any other viewer is leading, return.
        if (theOthers[i].isLeading) {
          return;
        }
      }

      activeViewer.isLeading = true; // Turn on.
      objArray.forEach(function (obj) {
        // Set viewport for all viewers
        obj.viewer.viewport.zoomTo(activeViewer.viewport.getZoom());
        obj.viewer.viewport.panTo(activeViewer.viewport.getCenter());
      });
      activeViewer.isLeading = false; // Turn off.
    };

    // Add handlers
    objArray.forEach(function (obj) {
      // When Viewer i is zooming we want Viewer i to lead
      obj.viewer.addHandler('zoom', viewerHandler(obj.viewer, objArray));
      // When Viewer i is panning we want Viewer i to lead
      obj.viewer.addHandler('pan', viewerHandler(obj.viewer, objArray));
    });
  }


dynamic_createView(["viewer1","viewer2","viewer3"]);

});

  </script>
</head>

<body>
  <div id="mainView"></div>


</body>

</html>


同步查看器
.seadragon查看器{
显示：内联块；
宽度：45%；
高度：600px；
}
//定义我们的形象
var duomo={
图片：{
xmlns:“http://schemas.microsoft.com/deepzoom/2008",
Url://openseadagon.github.io/example images/duomo/duomo_files/“，
格式：“jpg”，
重叠：“2”，
瓷砖大小：“256”，
尺寸：{
宽度：“13920”，
高度：“10200”
}
}
};
//创建osd查看器
函数createViewer（id，tileSources）{
返回OpenSeadragon({
id:id，
前缀：“//openseadagon.github.io/openseadagon/images/”，
瓷砖资源：瓷砖资源
});
}
//使用道具创建obj
函数createViewerObj（查看器）{
返回{
id:viewer.id，
阅读：错，
观众：观众
}
}
//现在创建查看器
$（函数（）{
函数动态_createView（ArrView）{
var htmlContent=“”；
对于（变量i=0；i
这是我的方式

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Synchronized Viewers</title>
  <style>
    .seadragon-viewer {
      display: inline-block;
      width: 45%;
      height: 600px;
    }
  </style>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>



  <script>
    // Define our image
    var duomo = {
      Image: {
        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
        Format: "jpg",
        Overlap: "2",
        TileSize: "256",
        Size: {
          Width: "13920",
          Height: "10200"
        }
      }
    };

    // Create osd viewer
    function createViewer(id, tileSources) {
      return OpenSeadragon({
        id: id,
        prefixUrl: "//openseadragon.github.io/openseadragon/images/",
        tileSources: tileSources
      });
    }

    // Create obj with props
    function createViewerObj(viewer) {
      return {
        id: viewer.id,
        isLeading: false,
        viewer: viewer
      }
    }

    // Now create the viewers

$(function(){

  function dynamic_createView(arrViews){

    var htmlContent="";

    for (var i = 0; i < arrViews.length; i++) {
      htmlContent+='<div id="'+arrViews[i]+'" class="seadragon-viewer"></div>';
    }


    $("#mainView")[0].innerHTML=htmlContent;


    for (var i = 0; i < arrViews.length; i++) {
      window[arrViews[i]]= createViewer(arrViews[i],duomo);
    }    

    var objArray= [];

    for (var i = 0; i < arrViews.length; i++) {
      objArray[i]=createViewerObj(window[arrViews[i]]);
    }



    // We need a viewer handler for each viewer
    var viewerHandler = function (activeViewer, objArray) {

      var theOthers = [];

      for (var i = 0; i < objArray.length; i++) {
        if (activeViewer.id !== objArray[i].id) {
          theOthers.push(objArray[i]);
        }
      }
      // OK, now I have an array of everything but the "active" viewer.

      for (var i = 0; i < theOthers.length; i++) {
        // If any other viewer is leading, return.
        if (theOthers[i].isLeading) {
          return;
        }
      }

      activeViewer.isLeading = true; // Turn on.
      objArray.forEach(function (obj) {
        // Set viewport for all viewers
        obj.viewer.viewport.zoomTo(activeViewer.viewport.getZoom());
        obj.viewer.viewport.panTo(activeViewer.viewport.getCenter());
      });
      activeViewer.isLeading = false; // Turn off.
    };

    // Add handlers
    objArray.forEach(function (obj) {
      // When Viewer i is zooming we want Viewer i to lead
      obj.viewer.addHandler('zoom', viewerHandler(obj.viewer, objArray));
      // When Viewer i is panning we want Viewer i to lead
      obj.viewer.addHandler('pan', viewerHandler(obj.viewer, objArray));
    });
  }


dynamic_createView(["viewer1","viewer2","viewer3"]);

});

  </script>
</head>

<body>
  <div id="mainView"></div>


</body>

</html>


同步查看器
.seadragon查看器{
显示：内联块；
宽度：45%；
高度：600px；
}
//定义我们的形象
var duomo={
图片：{
xmlns:“http://schemas.microsoft.com/deepzoom/2008",
Url://openseadagon.github.io/example images/duomo/duomo_files/“，
格式：“jpg”，
重叠：“2”，
瓷砖大小：“256”，
尺寸：{
宽度：“13920”，
高度：“10200”
}
}
};
//创建osd查看器
函数createViewer（id，tileSources）{
返回OpenSeadragon({
id:id，
前缀：“//openseadagon.github.io/openseadagon/images/”，
瓷砖资源：瓷砖资源
});
}
//使用道具创建obj
函数createViewerObj（查看器）{
返回{
id:viewer.id，
阅读：错，
观众：观众
}
}
//现在创建查看器
$（函数（）{
函数动态_createView（ArrView）{
var htmlContent=“”；
对于（变量i=0；i