Есть ли способ настроить виджет TradingView ticker? [закрытый]

У вас есть немного неправильный вопрос и из-за этого неправильные ответы. Правильный вопрос должен быть следующим:

• как прокрутить виджет TradingView ticker?

I ... хотел узнать, есть ли способ:

1. сделать прокрутку тикера (iframe scrolling=yes)
2. измените размер виджета.

Да, прокрутка тикера и изменение размера виджета возможны, но нам это не нужно iFrame scrolling=yes.

Вместо этого мы обернем этот iframe с помощью div и изменим размер этого элемента div. Эту информацию вы можете найти другими словами, как подсказку на сайте виджета tradingview ticker :

В описании говорится, что я могу отображать до 15 символов с помощью виджета тикера. Почему я вижу только 5?

виджет "тикер" по умолчанию использует параметр Autosize. Это означает, что он принимает ширину родительского элемента. Наше демо страница достаточно широка, чтобы показать только 5 символов. Вы должны сделать родительский элемент шире, чтобы увидеть все символы.

Пример кода

function resizeWidget()
{
    var containerTradingview = document.querySelector('#container-tradingview');
    containerTradingview.style.maxWidth = '630px';
}

<center>
<div id="container-tradingview" style="max-width:420px;height:90px;overflow-x:auto;overflow-y:hidden">  
<div style="width:2100px">
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
    <div class="tradingview-widget-copyright">
        <a href="https://www.tradingview.com" rel="noopener" target="_blank">
            <span class="blue-text">Quotes</span>
        </a> by TradingView
    </div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-tickers.js" async>
    {
        "symbols":
        [
            {"title": "S&P 500", "proName": "INDEX:SPX"},
            {"title": "Nasdaq 100", "proName": "INDEX:IUXX"},
            {"title": "EUR/USD", "proName": "FX_IDC:EURUSD"},
            {"title": "BTC/USD", "proName": "BITFINEX:BTCUSD"},
            {"title": "ETH/USD", "proName": "BITFINEX:ETHUSD"},
            {"title": "Groupon Inc.", "proName": "NASDAQ:GRPN"},
            {"title": "Walmart Inc.", "proName": "NYSE:WMT"},
            {"title": "Amazon Inc.", "proName": "NASDAQ:AMZN"},
            {"title": "Yelp Inc.", "proName": "NYSE:YELP"},
            {"title": "eBay Inc", "proName": "NASDAQ:EBAY"}
        ],
        "locale": "en"
    }
    </script>
</div>
<!-- TradingView Widget END -->
</div></div>
<br>
<input type="button" value="Resize widget" onclick="resizeWidget()">
</center>

Вы не можете выполнить этот виджет на SO, потому что iframe из этого фрагмента находится в песочнице.

Пожалуйста, смотрите этот пример на codepen.io.

Насколько я знаю, вы не можете изменить или настроить содержимое iframe (есть обходной путь, но это немного сложно); это связано с политикой того же происхождения. Однако вы все еще можете взаимодействовать с самим тегом, поскольку он должен быть тем же источником/доменом, что и ваш собственный код. Я протестировал код и заметил, что iframe добавляется динамически из javascript tradingview. То, что вы можете сделать, это дождаться его загрузки, а затем добавить свойство css переполнение=прокрутка.

<script type="text/javascript"> setTimeout(function() {document.querySelector("iframe").style.overflow="scroll";}, 500); </script>

Проблема в том, что он даже не работает, потому что код tradingview автоматически добавляет/удаляет торговые пары на основе ширины окна, то есть iframe или контейнер пар никогда не будет переполнен. Попробуйте увеличить / уменьшить масштаб, глядя на парный html-код, и вы увидите, что происходит.

Ваше последнее решение-еще раз взглянуть на api tradingview, чтобы убедиться, что они не реализовали никакого способа прокрутки торговых пар пока нет. Если это так, вы должны связаться с их технической поддержкой и объяснить им свою проблему.

Если Вы действительно хотите настроить содержимое iframe и таким образом избавиться от ограничений политики того же происхождения, вы можете использовать серверное решение, о котором я упоминал ранее https://stackoverflow.com/a/35053713/8538711 . Он написан с использованием php, но решение, вероятно, применимо и к другим серверным языкам.

@McLeodx, afaik я не то, что у вас есть контроль над iframe, вместо этого вы можете сделать что-то, что я сделал, пожалуйста, посмотрите на приведенный ниже рабочий пример или здесь (ссылка codepen) , Надеюсь, это поможет :)

.container-outer {
  max-width: 960px;
  /* update the width of the display contaier as per your requirement */
}
.container-width {
  width: 3000px;
  /* Total width of the whole iframe, based on the number of tickers displaying */
}
<!--  -->

.container-outer {
  margin: 0 auto;
  max-width: 960px;
  position: relative;
  box-shadow: inset 0 43px 0 0 #eee;
  border-bottom: 1px solid #ccc;
  height: 71px;
  overflow: hidden;
}
.container-outer:before,
.container-outer:after {
  top: 0;
  width: 1px;
  height: 100%;
  content: '';
  position: absolute;
}
.container-outer:before {
  border-left: 1px solid #ccc;
}
.container-outer:after {
  right: 0;
  border-right: 1px solid #ccc;
}
.container-inner {
  overflow-x: auto;
  overflow-y: hidden;
  height: 100px;
}

.shadow-left:before,
.shadow-right:after {
  width: 20px;
}

.shadow-left:before {
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.15)), to(transparent));
  background: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, transparent 100%);
}

.shadow-right:after {
  background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.15)), to(transparent));
  background: linear-gradient(to left, rgba(0, 0, 0, 0.15) 0%, transparent 100%);
  right: 0;
}

<div class="container-outer">
  <div class="container-inner">
    <div class="container-width">
      <!-- TradingView Widget BEGIN -->
      <div class="tradingview-widget-container">
        <div class="tradingview-widget-container__widget"></div>
        <div class="tradingview-widget-copyright">
          <a href="https://www.tradingview.com" rel="noopener" target="_blank">
            <span class="blue-text">Quotes</span>
          </a> by TradingView
        </div>
        <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-tickers.js" async>
          {
            "symbols": [
              {
                "title": "S&P 500",
                "proName": "INDEX:SPX"
              },
              {
                "title": "Nasdaq 100",
                "proName": "INDEX:IUXX"
              },
              {
                "title": "EUR/USD",
                "proName": "FX_IDC:EURUSD"
              },
              {
                "title": "BTC/USD",
                "proName": "BITFINEX:BTCUSD"
              },
              {
                "title": "ETH/USD",
                "proName": "BITFINEX:ETHUSD"
              },
              {
                "title": "S&P 500",
                "proName": "INDEX:SPX"
              },
              {
                "title": "Nasdaq 100",
                "proName": "INDEX:IUXX"
              },
              {
                "title": "EUR/USD",
                "proName": "FX_IDC:EURUSD"
              },
              {
                "title": "BTC/USD",
                "proName": "BITFINEX:BTCUSD"
              },
              {
                "title": "ETH/USD",
                "proName": "BITFINEX:ETHUSD"
              },
              {
                "title": "S&P 500",
                "proName": "INDEX:SPX"
              },
              {
                "title": "Nasdaq 100",
                "proName": "INDEX:IUXX"
              },
              {
                "title": "EUR/USD",
                "proName": "FX_IDC:EURUSD"
              },
              {
                "title": "BTC/USD",
                "proName": "BITFINEX:BTCUSD"
              },
              {
                "title": "ETH/USD",
                "proName": "BITFINEX:ETHUSD"
              }
            ],
              "locale": "en"
          }
        </script>
      </div>
      <!-- TradingView Widget END -->
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  // Scroll Shadow
  $(document).ready(function() {
    $(".container-inner").on("scroll", function () {
      var cur = $(this).scrollLeft();
      if (cur == 0) {
        $('.container-outer').addClass('shadow-right').removeClass('shadow-left');
      }
      else {
        var max = $(this)[0].scrollWidth - $(this).parent().width();
        if (cur == max) {
          $('.container-outer').addClass('shadow-left').removeClass('shadow-right');
        } else {
          $('.container-outer').addClass('shadow-right shadow-left');
        }
      }
    });
    $(".container-inner").trigger("scroll");
  });
</script>