How to send external data to OnlyOffice plugin

Question

I am developing onlyoffice plugin, which need to consume data (like reportid, session details that will be used to load data from server) from launching application.

structure of page come out like:

launching page (editor.aspx) -- iframe 1 to load editor -- -- ifram 2 to load plugin

Here i want to access data from editor.aspx into iframe 2 (javascript)

I tried using queryString like window.parent.location.search but it only can traverse till iframe 1, but not main aspx page. As i don't have control on what loads in iframe 1 it didn't work.

Also i tried with cookies and localStorage but none worked out.

Please guide..

Answer 1

launching page (editor.aspx) -- iframe 1 to load editor -- -- ifram 2 to load plugin. Here i want to access data from editor.aspx into iframe 2 (javascript)

There is no way to get direct access to the iframe with editor, the only way to work with it is using document server plugins

Answer 2

Actually there is a way... Having spent a LOT of time analysing what is going on... finally found a nice way to exchange configs between the TOP frame and PLUGIN frame with just a few lines of code leveraging the onlyoffice API - without any hacks :)

Editor Config object:

config: {
    "width"       : "100%",
    "height"      : "100%",
    "type"        : "desktop",
    "documentType": "text",
    "token"       : "{{token}}",
    "document"    : {
        "title"      : "{{document.name}}",
        "url"        : "{{downloadUrl}}",
    
    ...
    
    events: {
        'onReady': <application ready callback>, // deprecated
        ...
        'onInfo': function ( data ) {
            if ( data && data.data && data.data.getConfig ) {
                docEditor.serviceCommand ( 'getConfig', config.document );
            }
        }
    }
}

var docEditor = new DocsAPI.DocEditor("placeholder", config);

onInfo event will receive the request from your plugin. Need to check the event data has getConfig attribute. If it does, send back the config to the plugin.

Within your plugin's index.html add an inline script tag with this content:

// config ref
var config;

// Get ready to receive the response from TOP
window.parent.Common.Gateway.on ( 'internalcommand', ( data ) => {
    if ( data.command === 'getConfig' ) {
        config = data.data;
    }
} );

// Send custom config request to TOP
window.parent.Common.Gateway.sendInfo ( { getConfig: true } );

It subscribes to the internalcommand Gateway events which will be called by TOP, then kick in the communication process by calling the sendInfo command. Because the editor and your plugins (most likely) will be hosted on the same domain, you can access it via the window.parent ref.

This will download the config.document configuration object and store it in the plugins local config variable automatically - when you click on the plugin in the toolbar.