【问题标题】:Passing a script to innerHTML将脚本传递给innerHTML
【发布时间】:2017-04-21 03:45:32
【问题描述】:

在您将其标记为重复之前,我已经查看了here、as well、here too,但我似乎找不到可行的解决方案。我知道由于 script 标签,我无法将脚本传递给 innerHTML。但是有没有一种方法可以将这个特定的 API 推送到一个 div 而不将它放到 HTML 页面上。我有一个按钮,它接受输入并运行几个 $.get 来获取股票信息,所以我想把它作为结果的一部分,但是,innerHTML 是不允许的,我已经尝试了许多解决方案上面的链接,无济于事。
我可以将下面的脚本放在 HTML 页面的 div 中,但我不想这样做,而且我需要获取用户输入,因此将它放在我的 .js 中会更容易一起执行所有功能。我已经包含了小部件的 js。

<script type="text/javascript">
new TradingView.widget({
  "width": 480,
  "height": 400,
  "symbol": "NASDAQ:AAPL",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "White",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "hide_top_toolbar": true,
  "save_image": false,
  "hideideas": true
});
</script>

到现在为止

var script = document.createElement('script');
script[(script.innerText===undefined?"textContent":"innerText")] = "new TradingView.widget({ 'width': 580, 'height': 400, 'symbol': 'NASDAQ:"+ticker+ "','interval': 'D','timezone': 'Etc/UTC','theme': 'White','style': '1','locale': 'en','toolbar_bg': '#f1f3f6','enable_publishing': false,'hide_top_toolbar': true,'save_image': false,'hideideas': true});";
document.getElementById("stockChart").appendChild(script);

这个工作,但不是我想要的,但是,这只是执行那个脚本,这个图表是页面上唯一显示的东西,有没有办法可以强制它出现在&lt;div&gt; 中?通过上述解决方案,脚本被执行,但没有将小部件放置在 div 中(看起来,我可能错了。我不精通这个)。

在这张图片中,当我使用带有其他操作的 JS 文件运行脚本时,它只是在页面上单独显示图形。

这是当代码在 div 中并且在运行任何 JS 函数之前,我猜它在 div 中,但是,我需要在框上方输入一个输入,以便所有信息都可以显示在一个页面上,如下所示

我希望将图表放在红点中,&lt;div&gt; 所在的位置

HTML

<div id="content">
          <img src="icon/logo.png">
          <h1>Search Shares</h1>
          <div id="stockTickGet">
            Ticker: <input type="text" id="tickBox" list="options"/>
            <button onclick="Ticker()" id="tickerSubmit" class="btn btn-primary">Submit</button>
            <datalist id="options"></datalist>
          </div>
          <div id='showStockTick' class='stockTicker'></div>
          <!-- <div id='stockChart'></div> -->
          <div id='stockChart'>
          </div>      
          <div id='showStockSearch' class='stockTicker'></div>
          <div id='newsresult' class='stockTicker'></div>

          <button class="btn btn-primary" data-toggle="modal" data-target="#modal1">Buy Stocks</button>

        </div>

从某种意义上说,这是我想做的,但不允许/工作

document.getElementById("stockChart").innerHTML = "<script> new TradingView.widget({ 'width': 580, 'height': 400, 'symbol': 'NASDAQ:GOOG','interval': 'D','timezone': 'Etc/UTC','theme': 'White','style': '1','locale': 'en','toolbar_bg': '#f1f3f6','enable_publishing': false,'hide_top_toolbar': true,'save_image': false,'hideideas': true});<"+"/script>";

【问题讨论】:

  • “我可以将下面的脚本放在 HTML 页面的 div 中,但我不想这样做” - 你是说如果你这样做了,那么它以您希望的方式工作,小部件出现在 div 中?
  • 嗯,不是特别的。通过工作,我的意思是它适合我的 HTML 布局(我不确定它是否在 div 中)。但是,我必须用用户输入替换小部件的参数,所以我需要将它包含到我的 JS 操作中,而其他操作类似的操作来获取该输入。他们都在执行一项操作,将所有信息放在一起以显示在页面上。我可以提供我想要的屏幕截图。
  • ticker 是在哪里定义的? new TradingView.widget() 是否调用 select 并填充 #stockChart 元素?
  • 在JS文件中,JS文件具有获取输入并提供下拉列表的功能。单击按钮后,另一个函数将抓取输入字段中的文本,并执行所有额外操作。
  • 不确定是什么问题?

标签: javascript jquery html


【解决方案1】:

虽然脚本可以放在 div 中,但这里的误解似乎是 您可以为脚本生成的任何 html 选择目标 div。

如果没有看到脚本代码或至少不知道脚本做了什么,就不可能说脚本是否产生了任何 html 元素,或者即使它产生了,你也不知道它是如何将这些元素注入当前页面的。

new TradingView.widget(..)。即使您将它作为脚本元素放置在页面中的 html 元素上,它也可能会跳舞并煮熟炖菜,就我们所知。

至于你的问题的解决方法:

我搜索了 Tradingview.widget 并找到了这个页面:www.tradingview.com。这似乎是你在说什么。查看页面源,您似乎可以在小部件选项中添加container_id:

new TradingView.widget({
     ...
     container_id : "widget-frame-container";
});

这意味着如果你有一个具有上述 id 的 div:

<div id="widget-frame-container"></div>

然后我会假设脚本产生的任何东西都会被注入那里。


很抱歉没有进行测试并给出半信半疑的答案!

【讨论】:

  • 完美...真的吗?我尽量做到具体。对不起,问题标题的误导,我想做的是实际标题本身,但内容有点到处都是。但这是一件很重要的事情,我想我太专注于做 innerHTML 来处理脚本
  • 对不起,我过火了。我删掉了最后一点刻薄。
猜你喜欢
  • 2014-05-31
  • 2014-09-10
  • 2017-07-29
  • 2015-11-01
  • 1970-01-01
  • 2017-09-20
  • 2014-08-22
  • 2021-05-01
  • 2012-03-15
相关资源
最近更新 更多