跳转至

嵌入式代码

本页面包含有关不同小部件嵌入式代码结构的详细信息。

cTrader Web、您的策略、单个策略、多个策略、市场图表

cTrader Web、市场图表、您的策略、单个策略和多个策略小部件的嵌入式代码如下所示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="ctrader-plugin-root" style="width: 100%, height: 100%"></div>
<script id="init" type="text/javascript" defer src="https://app.ctrader.com/widget.js"></script>
<script type="text/javascript">
    const script = document.getElementById('init');

    script.onload = () => {
        putInitScript('runPlugin');
        runPlugin('ctrader-plugin-root', {"route":"/?lang=en&theme=light&u=letstrade747","appConfig":{"chart":{"initialChartLayout":"Single"}}});
    };
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="ctrader-plugin-root" style="width: 100%, height: 100%"></div>
<script id="init" type="text/javascript" defer src="https://app.ctrader.com/widget.js"></script>
<script type="text/javascript">
    const script = document.getElementById('init');

    script.onload = () => {
        putInitScript('runPlugin');
        runPlugin('ctrader-plugin-root', {"route":"/copy-provider/?lang=en&theme=dark&providerNickname=letstrade747&u=letstrade747","appConfig":{"strategy":{"showStrategyPromotion":true}}});
    };
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="ctrader-plugin-root" style="width: 100%, height: 100%"></div>
<script id="init" type="text/javascript" defer src="https://app.ctrader.com/widget.js"></script>
<script type="text/javascript">
    const script = document.getElementById('init');

    script.onload = () => {
        putInitScript('runPlugin');
        runPlugin('ctrader-plugin-root', {"route":"/esp/2082/?lang=en&theme=dark&u=letstrade747","appConfig":{"strategy":{"showStrategyPromotion":false}}});
    };
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="ctrader-plugin-root" style="width: 100%; height: 100%; position: relative"></div>
<script id="init" type="text/javascript" defer src="https://app.ctrader.com/widget.js"></script>
<script type="text/javascript">
    const script = document.getElementById('init');

    script.onload = () => {
        putInitScript('runPlugin');
        runPlugin('ctrader-plugin-root', {"route":"/multiple-strategies/?lang=en&theme=dark&u=letstrade747&strategyIdList=2082%2C2203","appConfig":{"strategy":{"showStrategyPromotion":true}}});
    };
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="ctrader-plugin-root" style="width: 830px; height: 700px; position: relative"></div>
<script id="init" type="text/javascript" defer src="https://ct.spotware.com/widget.js"></script>
<script type="text/javascript">
    const script = document.getElementById('init');

    script.onload = () => {
        putInitScript('runPlugin');
        runPlugin('ctrader-plugin-root', {"route":"/market-chart/?s=EURUSD&period=H1&charttype=candlestick&palettename=dark&lang=en&w=830&h=700"});
    };
</script>

每个参数和函数参数定义如下。

名称 定义和值
div id "ctrader-root". 这是在网络资源中嵌入小部件的唯一标识符。
style "width: {number}%, height: {number}%". 嵌入块的相对宽度和高度（相对于父容器的大小）。 请注意，父元素的 display 属性必须设置为 display: block。
type...defer "text/javascript". 指示嵌入块包含文本格式 JavaScript 的指令。 defer 属性表示脚本应仅在浏览器完成解析嵌入块所在资源的整个 HTML 后才执行。
'runPlugin' 要执行的脚本名称。
'ctrader-plugin-root 要嵌入的元素名称。
"route" 要嵌入的元素相对于 cTrader Web 基本 URL 的 URL。
"appConfig" 嵌入元素的配置。 有关可能的值，请参见以下行。
"chart":{"initialChartLayout":"Single"}" cTrader Web 小部件的初始图表模式。 可以将 "initialChartLayout" 设置为 "Single"、"Multi" 或 "Free"。
"strategy":{"showStrategyPromotion":false} 确定是否为您的策略或任何策略小部件显示策略推广块的配置。

警告

在将这些小部件嵌入到您的网络资源之前，必须设置这些小部件的 style 参数；否则，小部件将不会显示。 您只能指定小部件的 width 和 height，并将所有其他属性留空。