从两个 HTML 文件访问 Forge 查看器
Posted
技术标签:
【中文标题】从两个 HTML 文件访问 Forge 查看器【英文标题】：Accessing the Forge Viewer From Two HTML Files 【发布时间】：2020-10-06 09:26:34 【问题描述】：我一直在开发一个包含 Autodesk-forge 查看器的网站（可以在我过去的问题中查看更多详细信息）。我已经在一个标准的 javascript (.js) 文件中成功地制作了许多 autodesk-forge 查看器功能。这些功能包括在按下外部按钮时显示查看器和隔离到特定部分。
目前我有一个主要的 html/php 主页，其中我使用 <script src="MyForgeFunctions.js"></script> 将我的 javascript 文件包含在我的所有伪造函数中
这些功能是通过一个按钮来访问的，该按钮成功地在 html 页面中显示了查看器。附加到我的主 php/html 页面，通过 iframe html 引用 (<iframe src="URL.php"></iframe>) 添加了另一个 html/php 页面。我的主页显示了我们制作的主要机器，而嵌入的 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 事件执行该功能。从第一个/主页 html 页面运行该函数时，将显示以下内容：
T globalManager: e, clientContainer: div#forgeViewer, container: div.adsk-viewing-viewer.notouch.dark-theme.quality-text, config: …, contextMenu: o, …。这对查看器来说是正常的，但是当从第二个 html 页面执行该函数时，查看器是未定义的。任何有关为什么会发生这种情况或任何解决方案的帮助将不胜感激。干杯！
【问题讨论】：
发布您的 iframe 页面代码 - iframe 独立于父页面，由于安全原因，您对父页面上的元素的访问权限非常有限 【参考方案1】：从 iframe 中，为了访问主网页内的查看器，我必须使用 (parent.viewer)。
【讨论】：
以上是关于从两个 HTML 文件访问 Forge 查看器的主要内容，如果未能解决你的问题，请参考以下文章