在以 innerHTML 加载的页面中显示 JavaScript 变量 [重复]答案

【问题标题】：Display a JavaScript variable in a page loaded in innerHTML [duplicate]在以 innerHTML 加载的页面中显示 JavaScript 变量 [重复]
【发布时间】：2018-11-19 09:44:47
【问题描述】：

我有一个 HTML 页面，它通过 innerHTML 在另一个 HTML 页面中加载。经过几天的工作，该脚本运行良好，并且为内部页面调用了另一个 JS 文件，该文件（名为“Unified_app.js”）基本上运行了一些日期计算。一切正常，正确的日期打印到控制台。但是，我想不通在一个页面内的页面上可以显示控制台日期。 Document.write 在这种情况下不起作用（我假设是因为标签没有正确读取？），所以我需要想出一个解决方法。有任何想法吗？

这是我拥有的 innerHTML 函数：

function getYearOffset(strCutoffDate, intYearOffset)
{
  var datCurrentDate = new Date();
  var intCurrentYear = datCurrentDate.getFullYear();
  var intCurrentMonth = strCutoffDate.substr(5, 2) - 1;
  var intCurrentDay = strCutoffDate.substr(8, 2);
  var datCutoffDate = new Date(intCurrentYear, intCurrentMonth, intCurrentDay);

  if (Number(datCurrentDate) < Number(datCutoffDate))
  {
    var datRequestedDate = new Date(datCurrentDate.getFullYear(), intCurrentMonth, intCurrentDay);
  }
  else
  {
    var datRequestedDate = new Date(datCurrentDate.getFullYear() + intYearOffset, intCurrentMonth, intCurrentDay);
  }
return datRequestedDate.getFullYear();
}

var script = document.createElement("script");
script.src = "/resource/resmgr/scripts/Unified_app.js";
document.head.appendChild(script);


function getInclude(strIncludeContainer, strIncludeURL)
{
  var strPage = '';
  var intIndexOfBodyOpen = 0;
  var intIndexOfBodyClose = 0;
  var objXhttp;

  objXhttp = new XMLHttpRequest();
  objXhttp.onreadystatechange = function()
  {
    if (this.readyState == 4 && this.status == 200)
    {
      strPage = this.responseText;
      intIndexOfBodyOpen = strPage.indexOf('<body>');
      intIndexOfBodyClose = strPage.indexOf('</body>');
      document.getElementById(strIncludeContainer).innerHTML = strPage.substring(intIndexOfBodyOpen + 6, intIndexOfBodyClose);
    }
  };
  objXhttp.open("GET", strIncludeURL, true);
  objXhttp.send();
}

我正在使用：

<script>document.write(award_year1);</script>

编写以下日期调用：

const date = new Date();
let offset = 0;
const threshold = new Date();
threshold.setMonth(3); //January is 0!
threshold.setDate(3);
if (Date.now() > threshold) { 
  offset = 1;
}
var theDate = new Date();
var award_year1 = date.getFullYear() + offset;
var award_year2 = date.getFullYear() + 1 + offset;

console.log(award_year1);
console.log(award_year2);

当加载页面内页面 HTML 文件或内部页面本身时，我将正确的日期计算发送到控制台，但加载到其他页面。你有什么想法可以让我走上正确的道路吗？这可能超出了我对 JavaScript 的理解水平。我想也许我的代码顺序不正确，但我一直在摆弄这个，似乎无法弄清楚在哪里或为什么。

【问题讨论】：

如果您将<script> 标签加载到您的innerHTML 中，出于安全考虑，浏览器将不会处理脚本标签。
@PatrickEvans 这就是我认为的问题所在。这个问题有解决方法吗？另一种在没有脚本标签的情况下从控制台打印到 HTML 的方法？
您可以导入/导出其他 javascript 文件吗？或者您也可以发出 XML 请求
@DennisSpierenburg 感谢您的建议。它实际上并不是一个完整的 javascript 文件。这似乎很麻烦。我只是想将两个日期打印到 HTML 中。使用 PHP 包括：(
@beingbecoming php 可以更快地包含它，当然因为它的服务器端呈现。 Javascript unforutnally 还不能做到这一点（除了模块 es6 和更高版本）

标签： javascript html

【解决方案1】：

我不确定这是否能解决问题，但您可以尝试一下。正如您所说，不会触发 document.write，因为您的 JS 在您的 DOM 之前加载。

document.addEventListener("DOMContentLoaded", function(event) {
    //your functions
});

也许这会对你有所帮助

【讨论】：

【解决方案2】：

我想这是不可能的。我最终用 iframe 替换了 innerHTML，这似乎已经奏效，因此我现在可以使用脚本标签。不是一个理想的解决方案，但它有效

【讨论】：