javascript - 关于innerHTML的几个问题-6ren

javascript - 关于innerHTML的几个问题

转载作者：行者123 更新时间：2023-12-03 11:32:49

27

4

我正在转换一个在巴西创建的老程序员的笑话程序，类似于 MIT's SCIgen但使用艺术术语而不是商业胡言乱语。

由于该程序太旧了(geocities 时代旧了)，它当然使用了大量的 document.write 而不是innerHTHML。

第一个问题是，在innerHTML 中放置大量代码是否安全？由于原始程序加载了 4 组数组，其中包含可以组合起来形成伪文章的所有可能的文本，因此这是一段代码:

new_window.document.write("<body bgcolor=\"#000000\">");
new_window.document.write("<body text=\"#00FF00\">")
new_window.document.write("<p align=\"center\"><b>"+atitle+"</b><hr></p>");

firstshot = 1;
paragraph = 0;
while(lines > 0) {
    if (firstshot == 1) {
        if (lines % 101 == 0 && lines % 19 == 0) {
            new_window.document.write(tab0.chr(1,0)+tab0.chr(0,1)+tab3.chr(0,0)
.....
...

这在一英寸长的非嵌套代码块中继续，整个代码在这里 http://jsfiddle.net/jmqdx09g/

我正在尝试，这是我到目前为止所得到的:

<body>
    <div id="target"></div>
    <div id = "myDiv"></div>
    <span id = "mySpan"></span>
    <br>

    <button id="restore">restore</button>
    <p>&nbsp;</p>
    <form name="form1" method="post" action="">
        <input type="submit" name="remove" id="remove" value="remove">
    </form>
    <p>&nbsp;</p>
</body>
<script type = "text/javascript">
    var message =      
        '<li><a href="../index.html">Home</a></li>'+
        '<li><a href="../about">About</a></li>'+
        '<li><a href="../contact/index.html">Contact</a></li>'+
        '<li><a href="../works/index.html">Works</a></li>'+
        ' <li><a href="../projects/index.html">Projects</a></li>'+
        '<li><a href="../curriculum/index.html">Curriculum</a></li>'

    var message2 =      
         '<div class="content">'+ 
         '<iframe src="/yourpage.html"  frameborder="0" width="600" height="650" scrolling="no">'+
         '<p>Your browser does not support iframes.</p>'+
         '</iframe></div>'

    document.getElementById("myDiv").innerHTML = message;  // use innerHTML for block and inline HTML elements
    document.getElementById("remove").addEventListener("click", function ()
    {
        document.getElementById("myDiv").innerHTML = message2;
    });

    document.getElementById("restore").addEventListener("click", function ()
    {
        document.getElementById("myDiv").innerHTML = message;
    });

它按预期工作，加载一些 html 内容，按一下按钮，内容就会被 iframe 替换

iframe 是最好的解决方案还是用 js 替换整个 html 是最佳选择？

的变量消息 = '一些代码'+ '一些代码'+

到目前为止看起来很安全，但就我进入转换而言，我会头痛吗？或者这个方法看起来很简单？

我应该使用 window.onload 而不是替换内容持有者 div 吗？

最佳答案

我的两分钱值...

Is it safe to place like tons of code inside of innerHTMLs?

安全，是的...易于维护，不。前端代码是针对客户端的，因此如果他们选择黑客攻击自己，那就让他们......当然，发送回服务器的任何内容都应该被清理并且不被信任，但这是一个完全不同的问题。

我认为最大的问题是可维护性。

接下来是JS，将其重构到一个单独的文件中，开始缓存变量使代码更容易查看。

最后，您需要 iFrame 吗？还是新窗口？难道你不能简单地将“艺术术语”附加到当前 html 的底部吗？从而省去了 iframe 的麻烦。

我是非 jQuery 的完全拥护者，但也许对您来说使用 jQuery 的 HTML 编辑 API 可能是一个好主意。可以帮助将一些问题抽象为更具可读性和可维护性的形式。话又说回来，vanilla JS 真的很棒，如果能这样做的话，这就是一个很好的学习方式。

关于javascript - 关于innerHTML的几个问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26668775/

27

4

0

文章推荐： javascript - 一款 watch 功能内含两种型号

文章推荐： javascript - 将城市名称从 php 传递到 js(第 2 部分)

文章推荐： javascript - 在javascript中创建结构对象的解决方案

innerhtml - JavaScript .innerHTML 仅在手动调用时工作
我有一个非常简单的函数，用于替换元素的innerHTML。我已经尝试调试这个问题几个小时了，但就是做不到，这令人恼火。当从按钮调用时，按下 JavaScript(如下)可以正常工作，但是当从另一个函
javascript - 是否可以将变量从一个 innerhtml 传递到另一个 innerhtml
我正在开发的代码片段有四个带有 javascript 的内部 html，现在我的问题是我们能否从所有这些数据中获取所有这些数据并添加(如果是整数)它们或连接(如果是字符串)并显示在另一个 div 标签
Angular - innerHTML 属性 - 延迟 innerHTML 的一部分
我正在使用 [innerHTML]显示一个字符串。字符串由同一对象的两个属性组成。该对象来自将对象列表(来自 NgRx 的 Observable)传递给 *ngFor .此外，管道用于决定应该在 [i
javascript - .innerHTML : Cannot set property 'innerHTML' of null
首先，我对编码完全陌生，并且一直在空闲时间使用自学工具学习 Javascript。我已经学到了足够的知识来开始构建自己的项目。我的第一次尝试是构建一个随机发生器(在本例中为随机餐厅名称)。 Javas
innerhtml - 为什么在使用 innerHTML 时两个 span 元素之间没有间距？
如题，这些span元素在浏览器中以两种样式显示，为什么？ function loadHTML() { var html = 'sfdssfds';
php Xpath 获取带有 innerHTML 标签的 innerHTML
我有一个格式如下的 HTML 文件: subject detail important subject detailimportant 我写了一个 PHP 代码来自动获取每个 p1 并将它们插入到我的
javascript - onclick innerhtml 在 onclick innerhtml 中
我希望这个主题符合问题。嘿，请原谅我的笨蛋，但我一直在绞尽脑汁地试图解决这个问题。代码: chapter 1';">Wonderful 我想要的是显示一个名为“Wonderful”的链接，
javascript - 为什么在将值返回给 innerHTML 时，函数内部的 innerHTML 会被忽略？
我正在调用一个打印到 div 的函数，然后返回一个也打印到 div 的字符串。以下将只打印“二”，但我期待它先打印“一”再打印“二”: global_cdiv = "view" fu
javascript - 为什么随着 innerHTML 变大，替换 innerHTML 会变慢？
我有一个不是 contentEditable 的 div。我捕获击键，将关联的字符插入到内存中的字符串中，然后调用 render() 函数用当前字符串替换 div 的 innerHTML。我的问题
javascript - 为什么要 y.innerHTML = x.innerHTML;避免？
假设我们在页面上有一个 DIV x，我们想将那个 DIV 的内容复制(“复制粘贴”)到另一个 DIV y 中。我们可以这样做: y.innerHTML = x.innerHTML; 或使用 jQuer
javascript - 尝试更改 innerHTML 时出错 - 无法设置 null 的属性 'innerHTML'
我正在尝试根据 javascript 函数填充的数字更改 div 的innerHTML。不幸的是，我收到了一个错误，但我不确定为什么。伪代码如果number > 2将innerHTML更改为秒，否
javascript - document.body.innerHTML = document.body.innerHTML 杀死页面？
我正在使用 ServiceNow 和 Angular.js 构建的网站上进行开发。页面似乎工作正常，直到我将 body 替换为自身后，所有 Buttons/onClicks 或搜索都停止响应..有人知
javascript - Angular [innerHtml] : how to render additional elements inside an element with [innerHtml] directive
带有 [innerHtml] 指令的元素似乎只是在该元素内添加声明的 html 字符串，仅此而已；通过 this stackblitz ，我试图在这样的元素中添加一些东西，但没有成功； new wo
javascript - 为什么 JavaScript 找不到给定的 InnerHTML 并返回 Cannot set property 'innerHTML' of null？
为什么选址 http://xn--wiadomesny-37b.pl/test/抛出 Uncaught TypeError: Cannot set property 'innerHTML' of nu
javascript - 我无法使用 .innerHTML 更改 HTML。不断收到消息 "cannot set innerHTML property of null"
我的 javascript 获取日期和时间并将其放置在 div 中如下: function print(message){ var div1= document.getElementById("d
javascript - 未捕获的类型错误 : Cannot set property 'innerHTML' of null- when setting the innerhtml to a string from an array
在下面的代码中，我尝试以不将猫名称硬编码到 html 的方式设置猫名称。因此我使用的是数组。然而，每当我尝试将innerHTML属性设置为catNames [0]或catNames [1]时，我都会收
javascript - 当从网络服务器提供服务时，写入 .innerHTML 不起作用，但当作为文件浏览时，写入 .innerHTML 不起作用，这可能是什么原因造成的？
我正在使用 mootool 的 Request.JSON 从 Twitter 检索推文。收到它后，我将写入目标 div 的 .innerHTML 属性。当我在本地将其作为文件进行测试时，即 file:
Angular2 路由 : How do I use [routerLink] within a

这个问题在这里已经有了答案: How to get Angular2 to bind component in innerHTML (1 个回答) 关闭 6 年前。所以我正在构建一个 angula

javascript - 如果 innerHTML 包含 x、y、z 等，则 replaceWith——需要针对多个 innerHTML 变体的解决方案
我有一个简短的脚本，它在 innerHTML 中查找具有特定文本的特定类，然后使用 replaceWith 替换整个元素。当只有一段特定的文本时，此方法非常有用，但我有几个项目要查找和替换。下面的
javascript - wordpress:如何使用 JS 更改动态生成的 div 的 innerHTML？错误: 'cannot set property innerHTMl of null'
我正在尝试使用 Wordpress/Woocommerce 上动态生成的 div 类更改“查看购物车”按钮的 innerHTML。我之前问过一个关于这个的问题，有人建议(谢谢 Mike :))因为 J

首页

博学

6Ren·AI

商城

javascript - 关于innerHTML的几个问题