Twitter Widget 不允许我更改 URL答案

【问题标题】：Twitter Widget won't let me change the URLTwitter Widget 不允许我更改 URL
【发布时间】：2019-04-18 16:21:52
【问题描述】：

我已在 HTML 中嵌入了 twitter 小部件。我有一个 JS 对象，其中包含 10 个 twitter 配置文件的 URL。我想创建一个函数，让我用对象中的另一个 URL 替换当前 URL（在小部件中）。但是在运行脚本时，href 不会改变（错误说它为 null）。

Twitter 是否会阻止对 HTML 类中的 href 或其他标签进行任何更改？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <p>
    <a class="twitter-timeline" id="twitter" data-width="300" data-height="500" href="https://twitter.com/Tesla"></a>
  </p>

  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

  <button onclick="change()">Change link</button> <button onclick="check()">Preview link</button>

  <script>
    var URL = document.getElementById("twitter").href;
    console.log(URL);

    function change() {
      alert(document.getElementById("twitter").href = "https://twitter.com/IBMref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor");
    }

    function check() {
      console.log(document.getElementById("twitter").href);
    }
  </script>


</body>

</html>

【问题讨论】：

无法复制此空错误。

标签： javascript twitter widget

【解决方案1】：

它确实发生了变化，你只是在变化本身上调用了警报。

var URL = document.getElementById("twitter").href;
console.log(URL);

function change() {
  document.getElementById("twitter").href = "https://twitter.com/IBM?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor";
  alert(document.getElementById("twitter").href);
}

function check() {
  console.log(document.getElementById("twitter").href);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>

<body>
  <p>
    <a class="twitter-timeline" id="twitter" data-width="300" data-height="500" href="https://twitter.com/Tesla"></a>
  </p>
  <button onclick="change()">Change link</button>
  <button onclick="check()">Preview link</button>
</body>

</html>

【讨论】：