从两个 HTML 文件访问 Forge 查看器

Question

我一直在做一个包含 autodesk-forge 查看器的网站（更多细节可以在我过去的问题中看到）。我已经在标准 javascript (.js) 文件中成功制作了许多 autodesk-forge 查看器功能。这些功能包括显示查看器，以及在按下外部按钮时隔离到特定部分。目前我有一个主 html/php 主页，其中包含我的 javascript 文件以及我使用 <script src="MyForgeFunctions.js"></script> 的所有伪造功能这些功能通过一个按钮访问，该按钮在 html 页面中成功显示查看器。附加到我的主要 php/html 页面，另一个 html/php 页面是通过 iframe html 引用 (<iframe src="URL.php"></iframe>) 添加的。我的主页显示我们制造的主要机器，而嵌入式 php/html 页面显示机器内的所有站点。我还在第二个 php/html 页面中包含了 MyForgeFunctions.js。由于网站的设置方式，我需要能够在两个网页中访问查看器。但是，当我尝试从第二个 html 页面访问查看器时，我收到一条消息，指出查看器未定义。下面是我的代码 MyForgeFunctions.js.

var ext = '';
var dim = '';
var assemblyname = '';

function getAssemblyName(){
assemblyname = sessionStorage.getItem("assemblyName");
//var ext = partname.substr(partname.lastIndexOf('.'));
ext = assemblyname.split('.');
dim = ext[0] + ':1';
console.log(assemblyname);
console.log(dim);
if (dim !== ''){
    isolateSelected();
}
}



//function to get part name from __MachineParts.php
var partname = '';
var extension = '';
var namewithoutextension = '';
function getPartName(){
partname = sessionStorage.getItem("partName");
//var ext = partname.substr(partname.lastIndexOf('.'));
extension = partname.split('.');
namewithoutextension = extension[0] + ':1'
console.log(partname);
console.log(namewithoutextension);
if (namewithoutextension !== ''){
    isolateSelectedPart();
}
}



/*******************************************************************************
 * 
 * AUTODESK FORGE VIEWER CODE (HTTP REQUESTS)
 * 
 *******************************************************************************/
//VARIABLE DECLARATION

var code = '';
var access_token = '';
const hub = 'xxxxxxxxxxxxxxxxxxxxxxxxxxx';
const project ='xxxxxxxxxxxxxxxxxxxxxxxxxxx';
const folder='xxxxxxxxxxxxxxxxxxxxxxxxx';
const item = 'xxxxxxxxxxxxxxxxxxxxxxxxx';
var itemid = '';
var urn = '';
var urn2 = '';

//allow the program to view data from autodesk
function authorize(){
    window.location.href = "https://developer.api.autodesk.com/authentication/v1/authorize?response_type=code&client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&redirect_uri=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&scope=data:read data:write bucket:read viewables:read bucket:create data:create";
}

//grab the code from the url
function getCode(){
    const querystring = window.location.search;
   // console.log(querystring);
    const urlParams = new URLSearchParams(querystring);
    code = urlParams.get('code');
   // console.log(code);
}
//call the function to get the code right away, and obtain a token
getCode();
getToken();

//function to obtain access token
function getToken(){
    $.ajax({
    method: 'POST',
    url: 'https://developer.api.autodesk.com/authentication/v1/gettoken',
    headers: {
        'Content-Type':'application/x-www-form-urlencoded'
    },
    data:'client_id=dm2VLfnwJ6rYHKPAg7dG6l9yVbBQPGlH&client_secret=HRMpOPusLhsVoIMk&grant_type=authorization_code&code=' + code + '&redirect_uri=http://team/__MachineViewerMV.php',

    success:function(response){
       // console.log(response);
        access_token = response.access_token;
        console.log(access_token);
    }
})
}

//Grab desired file id from project folder
function getItem(){
    $.ajax({
        method:'GET',
        url: 'https://developer.api.autodesk.com/data/v1/projects/' + project + '/folders/' + item + '/contents',
        headers:{
            Authorization:'Bearer ' + access_token
        },
    /*  beforeSend:function(before){
            if(access_token !== '' && viewer !==''){
            destroyViewer();}
        },*/
        success:function(response){
           //console.log(response);
           // folder = response.data[0].id;
           // console.log(folder);
         //  itemid = response.data[0].id;
           //console.log(itemid);
           console.log(response);

           for (var i = 0; i<response.data.length; i++){
               //console.log(response.data[i].attributes.displayName);
               if(response.data[i].attributes.displayName == fileName){
                   //console.log('hooray');
                  itemid = response.data[i].id;
                   console.log(itemid);
                   getVersion();
                   break;
               }
               else if (response.data[i].attributes.displayName !== fileName){
                   itemid = '';
               }
           }

        },
        error:function(error){
            authorize();
        }
    })
}

function get2dItem(){
    $.ajax({
        method:'GET',
        url: 'https://developer.api.autodesk.com/data/v1/projects/' + project + '/folders/' + item + '/contents',
        headers:{
            Authorization:'Bearer ' + access_token
        },
        /*beforeSend:function(before){
            if(access_token !== '' && viewer !== ''){
            destroyViewer();}
        },*/
        success:function(response){
           //console.log(response);
           // folder = response.data[0].id;
           // console.log(folder);
         //  itemid = response.data[0].id;
           //console.log(itemid);
           console.log(response);

           for (var i = 0; i<response.data.length; i++){
               //console.log(response.data[i].attributes.displayName);
               if(response.data[i].attributes.displayName == fileName2d){
                   //console.log('hooray');
                  itemid = response.data[i].id;
                   console.log(itemid);
                   getVersion();
                   break;
               }
               else if (response.data[i].attributes.displayName !== fileName2d){
                   itemid = '';
               }
           }

        },
        error:function(error){
            authorize();
        }
    })
}


//get version of the file using its id
function getVersion(){
    $.ajax({
        method:'GET',
        url: 'https://developer.api.autodesk.com/data/v1/projects/' + project + '/items/' + itemid + '/versions',
        headers:{
            Authorization:'Bearer ' + access_token
        },
        success:function(response){
           //console.log(response);
           urn = btoa(response.data[0].relationships.storage.data.id);
           console.log(urn);
           translateToSVF();
        }
    })
}

function translateToSVF(){
    $.ajax({
        method: 'POST',
        url:"https://developer.api.autodesk.com/modelderivative/v2/designdata/job",

        headers:{
            "content-type": "application/json",
            Authorization: "Bearer " + access_token
        },
        data:JSON.stringify({
            "input":{ "urn":urn

            },
            "output": {
     "formats": [
       {
         "type": "svf",
         "views": [
           "2d",
           "3d"
         ]
       }
     ]
   }
        }),
        success:function(response){
          //  console.log(response);
            urn2 = response.urn;
            console.log(urn2);
            checkStatus();
        }
    })
}

function checkStatus(){
    $.ajax({
        method: 'GET',
        url: "https://developer.api.autodesk.com/modelderivative/v2/designdata/" + urn2 + "/manifest",
        headers:{
            Authorization: "Bearer " + access_token
        },
        success: function(response){
            console.log(response);
            if (response.progress == 'complete'){
               displayViewer();
            }
            else if (response.progress !== 'complete'){
                alert('File Still Uploading, Press the Display Button Again!');
            }
            }

    })
}

//function to get list of viewables\
var guid = '';
function getViewable(){
    $.ajax({
        method:'GET',
        headers:{
            Authorization: "Bearer " + access_token
        },
        url: 'https://developer.api.autodesk.com/modelderivative/v2/designdata/' + urn2 + '/metadata',
    success:function(response){
        console.log(response);
        guid = response.data.metadata[0].guid;
        console.log(guid);
    }

    })
}

//funciton to get the list of items within a model
function getTree(){
    $.ajax({
        method: 'GET',
        headers:{
            Authorization: "Bearer " + access_token
        },
        url:'https://developer.api.autodesk.com/modelderivative/v2/designdata/' + urn2 + '/metadata/' + guid + '/properties',
        success:function(response){
            console.log(response);
        }
    })
}



/**********************************************************************************
 * 
 * FUNCTION TO DISPLAY THE VIEWER IN THE HTML PAGE
 * 
 **********************************************************************************/

 var viewer;

 function displayViewer(){
    //var viewer;
var options = {
    env: 'AutodeskProduction',
    api: 'derivativeV2',  // for models uploaded to EMEA change this option to 'derivativeV2_EU'
    getAccessToken: function(onTokenReady) {
        var token = access_token;
        console.log(token);
        var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
        onTokenReady(token, timeInSeconds);
    }
};

Autodesk.Viewing.Initializer(options, function() {

    var htmlDiv = document.getElementById('forgeViewer');
    viewer = new Autodesk.Viewing.Private.GuiViewer3D(htmlDiv);
    var startedCode = viewer.start();
   // sessionStorage.setItem("viewer", viewer);
    if (startedCode > 0) {
        console.error('Failed to create a Viewer: WebGL not supported.');
        return;
    }

    console.log('Initialization complete, loading a model next...');

});
var documentId = 'urn:'+urn2;
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);

function onDocumentLoadSuccess(viewerDocument) {
    var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
    viewer.loadDocumentNode(viewerDocument, defaultModel);
    console.log(viewer);


}

function onDocumentLoadFailure() {
    console.error('Failed fetching Forge manifest');
}

}

//function to hide the viewer
function destroyViewer(){
    console.log(viewer);
    viewer.finish();
viewer = null;
Autodesk.Viewing.shutdown();
}

/*****************************************************************************
 * FUNCTIONS TO MODIFY THE VIEWER TO ZOOM INTO THE CORRECT PART/ASSEMBLY
 */



function isolateSelected(){
    console.log(dim);
    console.log(viewer);
    viewer.search(dim, function(dbIds) {
   // viewer.search('"' + 'M-109408 FOLDING PLOUGH:2' + '"', function(dbIds) {
        console.log(dbIds.length);
        getSubset(dbIds, 'label', dim, function(dbIds) {
       // getSubset(dbIds, 'label', 'M-109408 FOLDING PLOUGH:2', function(dbIds) {
       // getSubset(dbIds, property.name, 'M-54439 POST TUBING:1', function(dbIds) {
            //getSubset(dbIds, property.name, property.value, function(dbIds){
            var it = viewer.model.getData().instanceTree;
            //console.log(it);
           for (i = 0; i<dbIds.length; i++){
               var namepart = it.getNodeName(dbIds[i]);
               if (namepart !== undefined){
            console.log(dbIds);
            console.log(namepart);}}
          /*  for (i = 121; i<381;i++){
                var dbId = i;
            var it = NOP_VIEWER.model.getData().instanceTree;
            var name = it.getNodeName(dbId);
            console.log(name);}*/
            viewer.isolate(dbIds)
           viewer.select(dbIds);
            viewer.utilities.fitToView();
        })
    }, function(error) {})
}

function isolateSelectedPart(){
    console.log(namewithoutextension);
    viewer.search(namewithoutextension, function(dbIds) {
   // viewer.search('"' + 'M-109408 FOLDING PLOUGH:2' + '"', function(dbIds) {
        console.log(dbIds.length);
        getSubset(dbIds, 'label', namewithoutextension, function(dbIds) {
       // getSubset(dbIds, 'label', 'M-109408 FOLDING PLOUGH:2', function(dbIds) {
       // getSubset(dbIds, property.name, 'M-54439 POST TUBING:1', function(dbIds) {
            //getSubset(dbIds, property.name, property.value, function(dbIds){
            var it = viewer.model.getData().instanceTree;
            //console.log(it);
           for (i = 0; i<dbIds.length; i++){
               var namepart = it.getNodeName(dbIds[i]);
               if (namepart !== undefined){
            console.log(dbIds);
            console.log(namepart);}}
          /*  for (i = 121; i<381;i++){
                var dbId = i;
            var it = NOP_VIEWER.model.getData().instanceTree;
            var name = it.getNodeName(dbId);
            console.log(name);}*/
            viewer.isolate(dbIds)
           viewer.select(dbIds);
            viewer.utilities.fitToView();
        })
    }, function(error) {})
}

//function to find the dbid of the part/assembly
function getSubset(dbIds, name, value, callback) {
    console.log("getSubset, dbIds.length before = " + dbIds.length)
    viewer.model.getBulkProperties(dbIds, {
        propFilter: [name],
        ignoreHidden: true
    }, function(data) {
        var newDbIds = []
        for (var key in data) {
            var item = data[key]
           // console.log(item.properties);
            if (item.properties[0].displayValue === value) {
                newDbIds.push(item.dbId)
            }
        }

        console.log("getSubset, dbIds.length after = " + newDbIds.length)

        callback(newDbIds)

    }, function(error) {})
}

由于网页的设置方式，当我需要在第一个网页中使用第二个网页的变量时，我使用了sessionStorage.getItem和sessionStorage.setItem。我还在 MyForgeFunctions.js:

里面做了一个简单的函数

function checkViewer(){
console.log(viewer);
}

然后，我在两个 html 页面中都添加了一个按钮，以使用 onclick 事件执行该功能。当 first/home html 页面中的函数为运行时，将显示以下内容： T {globalManager: e, clientContainer: div#forgeViewer, container: div.adsk-viewing-viewer.notouch.dark-theme.quality-text, config: {…}, contextMenu: o, …}。这对于查看器来说是正常的，但是当从第二个 html 页面执行该功能时，查看器是未定义的。任何关于为什么会发生这种情况的帮助或任何解决方案将不胜感激。干杯！

Answer 1

为了从 iframe 访问主网页内的查看器，我不得不使用 (parent.viewer)。

从两个 HTML 文件访问 Forge 查看器

Accessing the Forge Viewer From Two HTML Files

javascript

html

autodesk-forge

autodesk-viewer