search

epam / ketcher

Web-based molecule sketcher
https://lifescience.opensource.epam.com/ketcher/demo.html
Apache License 2.0
465 stars 164 forks source link

Access Ketcher iframe via JavaScript, .ketcher undefined... #2350

Open Jo-Zh opened 1 year ago

Jo-Zh commented 1 year ago

Hi, I tried to embedded Standalone package to a project, try to use Javascript access the iframe .ketcher following this link"https://lifescience.opensource.epam.com/ketcher/developers-manual.html#installation.", but failed.

which is from this link

Steps to Reproduce

  1. Download standalone package 2.7.2, Create ketcher folder for the download, create home page to embed index.html as a iframe.
  2. to homepage script block write the code: var ketcherFrame = document.getElementById('ifKetcher'); var ketcher = null; if ('contentDocument' in ketcherFrame) ketcher = ketcherFrame.contentWindow.ketcher; console.log(ketcherFrame.contentWindow) console.log(ketcher); else // IE7 ketcher = document.frames['ifKetcher'].window.ketcher;
  3. console.log(ketcherFrame.contentWindow): ketcher (U) and console.log(ketcher) is undefined

Actual behavior Cannot access ketcher, it is undefined

Expected behavior able to access ketcher and init setMolecular.

Desktop (please complete the following information):

Ketcher version [e.g. v2.4.2]. v2.7.2 standalone

Any help appreciated, Thanks!

KonstantinEpam23 commented 1 year ago

Hi @Jo-Zh thanks for reaching out! According to the code example you gave - it looks like you are setting the ketcherFrame variable instead of ketcher Can you please doublecheck if it will work for you if you use ketcherFrame variable?

Jo-Zh commented 1 year ago

Hi, thanks I embed Ketcher in another page, use IFrame:

<iframe id="ifKetcher" src="ketcher/index.html" width="800" height="600"></iframe>

And so I used the following:

var ketcherFrame = document.getElementById('ifKetcher'); var ketcher = null;

if ('contentDocument' in ketcherFrame) ketcher = ketcherFrame.contentWindow.ketcher; else // IE7 ketcher = document.frames['ifKetcher'].window.ketcher;

I also tried these code directly on the page, where:

<a href="ketcher/index.html">Ketcher</a>

with

var ketcher = ketcherWindow.ketcher;

In both cases ketcher is with undefined value. So I alternatively solve my problem with create another project with react library to get a complied bundle.js to get ketcher editor in django project. Just confused about the instruction on the https://lifescience.opensource.epam.com/ketcher/developers-manual.html#installation...