Open a study directly when using an iframe with React

Support
1

Describe Your Question

  • I’m unable to open a specific study when using an iframe in a React app.
  • OHIF Viewer v3.7.0

What steps can we follow to reproduce the issue?

I cloned the OHIF Viewer project and built it with the following changes:

In platform/app/public/config/default.js file:

1 - I updated routerBaseName to /ohif
2 - I updated wadoUriRoot, qidoRoot, and wadoRoot to my own dicomweb service

In platform/app/.env file, I set these two vars

1 - PUBLIC_URL=/ohif/
2 - APP_CONFIG=config/default.js

I then executed yarn run build which completed without errors and it created a dist folder.

1 - I copied the contents of the dist folder
2 - In my react app’s public folder, I created another folder called ohif, and pasted the contents of the dist folder
3 - In my react app’s index.html file, I added an iframe like this:

<iframe id="ohif-viewer" src="./ohif" style="width: 100%; height: 100vh; border: none"></iframe>

When I run my react app, I see the study list and it is pulling data from my dicomweb service.
If I click on a study and click Basic Viewer, It opens up that study and I can see images.

But how do navigate to a study directly? without depending on the study list?
Let’s say I have a button and on click, run some code to open a specific study?

I tried this with no luck:

let iframe = document.getElementById('ohif-viewer');
iframe.src = 'http://localhost:3000/ohif/viewer?StudyInstanceUIDs=1.2.840.113711....';

also tried:

iframe.contentWindow.location.href = 'http://localhost:3000/ohif/viewer?StudyInstanceUIDs=1.2.840.113711....';

In both cases, I basically get empty nested iframes.
I have looked at OHIF documentation AND several github issues but I have not found a clear answer.

Can you help?

2 Likes
2

Hello @mtesopt ,
Currently I am facing same issue. Were you able to find any solution? Thank you for your help in advance.