Question

我正在使用来自tradingview（https://www.tradingview.com/widget/ticker/）的此小部件，想知道是否有以下方法：

a）滚动报价栏（iFrame scrolling = yes）
b）调整窗口小部件的大小。

我以前没有使用过iFrame，也不确定如何进行自定义或者是否可以进行自定义。

Answer 1

您有一个错误的问题，并且因为这个错误的答案。正确的问题应该如下所示：

如何滚动交易视图行情显示窗口小部件？

我...想知道是否有办法：


使滚动条滚动（iFrame scrolling = yes）

调整窗口小部件的大小。

是的，可以滚动条的滚动条和调整窗口小部件的大小，但是我们不需要iFrame scrolling=yes。

我们用iframe来包装div并调整其大小，滚动此div元素。您可以在the tradingview ticker widget site上找到换句话说，作为提示：

描述说，我可以使用股票代码窗口小部件最多显示15个符号。为什么我只能看到5个？

“股票行情”小部件默认情况下使用“自动调整大小”参数。这意味着它接受父元素的宽度。我们的演示页面足够宽，仅显示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位于沙箱中。

请参见 this example on codepen.io 。

Answer 2

以下是可以达到预期效果的答案：https://codepen.io/epsilon42/pen/BPZgjP/

它主要涉及CSS动画的使用，但是还需要添加一些jQuery来克隆iframe，以消除代码运行到最后时的空白。由于无法处理iframe跨域的内容，这是我想到的唯一方法。

我必须删除TradingView脚本上的async才能正确触发$( document ).ready。

要注意的另一件事是，有必要根据您选择在置顶栏中包含多少项来更改CSS中的宽度：

.ticker-canvas {
  width: calc((200px * 15) + 2px);
}

将上述CSS中的值15更改为您在脚本中调用的项数。 200px似乎是小部件决定自动删除项目之前可以使用的最小宽度，但是如果需要，使用较高的值似乎没有任何问题。 2px占小部件两侧的1px边框。

HTML：

<!-- TradingView Widget BEGIN -->
<div class="ticker-container">
<div class="ticker-canvas">
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-tickers.js">
  {
  "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"
    },
    {
      "description": "Apple",
      "proName": "NASDAQ:AAPL"
    },
    {
      "description": "Berkshire",
      "proName": "NYSE:BRK.A"
    },
    {
      "description": "Microsoft",
      "proName": "NASDAQ:MSFT"
    },
    {
      "description": "Google",
      "proName": "NASDAQ:GOOG"
    },
    {
      "description": "Tesla",
      "proName": "NASDAQ:TSLA"
    },
    {
      "description": "Amazon",
      "proName": "NASDAQ:AMZN"
    },
    {
      "description": "AUD/USD",
      "proName": "OANDA:AUDUSD"
    },
    {
      "description": "Sony",
      "proName": "NYSE:SNE"
    },
    {
      "description": "BHP",
      "proName": "BHP"
    },
    {
      "description": "Telstra",
      "proName": "TLS"
    }
  ],
  "locale": "en"
}
  </script>
</div>
</div>
</div>
<!-- TradingView Widget END -->
<div class="content">
  <p>Some text.</p>
</div>

CSS：

body {
  margin: 0;
}
.content {
  padding: 10px 20px;
}
.content p {
  font-family: sans-serif;
}

/******/

.ticker-container {
  width: 100%;
  overflow: hidden;
}

.ticker-canvas {
  width: calc((200px * 15) + 2px);
  /* 
  200px = minimum width of ticker item before widget script starts removing ticker codes
  15 = number of ticker codes
  2px = accounts for 1px external border
  */
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker-canvas;
  animation-name: ticker-canvas;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
}
.ticker-canvas:hover {
  animation-play-state: paused
}

@-webkit-keyframes ticker-canvas {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker-canvas {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.tradingview-widget-container {
  position: relative;
}
.tradingview-widget-container iframe {
    position: absolute;
    top: 0;
}
.tradingview-widget-container iframe:nth-of-type(2) {
  left: 100%;
}

JS：

$( document ).ready(function() {
  $( ".tradingview-widget-container iframe" ).clone().appendTo( ".tradingview-widget-container" );
});

Answer 3

据我所知，您不能修改或调整iframe的内容（对此有一种解决方法，但有点棘手）；这是由于same-origin policy。但是，您仍可以与标签本身进行交互，因为它应与您自己的代码具有相同的来源/域。我已经测试了代码，并注意到iframe是从tradingview的javascript动态添加的。您可以做的就是等待其加载，然后添加css属性overflow = scroll。

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

问题在于它甚至无法工作，因为tradingview的代码会根据窗口的宽度自动添加/删除交易对，这意味着iframe或交易对的容器永远不会溢出。在查看成对的html代码时，尝试放大/缩小，您可以看到正在发生的事情。

您的最后一个解决方案是再次查看tradingview的api，以确保它们尚未实现滚动交易对容器的任何方式。如果是这样，您应该联系他们的技术支持并向他们解释您的问题。

如果您真的想要调整iframe的内容，从而摆脱同源策略的限制，则可以使用我先前提到的服务器端解决方案https://stackoverflow.com/a/35053713/8538711。它是使用php编写的，但是该解决方案可能适用于其他服务器端语言。

Answer 4

@ McLeodx，fafaik我认为您无法控制iframe，相反，您可以做我已经完成的事情，请查看以下工作示例或here(codepen link)，希望它帮助：）

.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>

有没有一种方法可以自定义一个交易视图行情窗口部件？

4 个答案: