为什么这个 document.innerHTML 函数不起作用?

huangapple go评论69阅读模式
英文:

Why doesn't this document.innerHTML function work?

问题

我不确定为什么如果你触发函数,什么都不会发生

  const 密码 = document.getElementById("密码").值;

  if (密码 === "密码") {
    警报("正确!");
    document.innerHTML = <embed src="http://stackoverflow.com" style="width:500px; height: 700px;"></embed>;
  } else {
    登录消息.textContent = "密码无效。";
  }
});

我期望嵌入一个网站

英文:

I am not sure why if you trigger the function, nothing happens

loginButton.addEventListener(&quot;click&quot;, function() {
  const password = document.getElementById(&quot;password&quot;).value;

  if (password === &quot;password&quot;) {
    alert(&quot;Correct!&quot;);
    document.innerHTML = &lt;embed src=&quot;http://stackoverflow.com&quot; style=&quot;width:500px; height: 700px;&quot;&gt;&lt;/embed&gt;;
  } else {
    loginMessage.textContent = &quot;Invalid password.&quot;;
  }
});

I was expecting a embed of a website

答案1

得分: 7

有至少四个独立的原因导致你的代码无法运行。

document不支持innerHTML

innerHTML是在HTML元素上找到的属性。 document对象不是HTML元素。

考虑使用document.body.innerHTML

innerHTML期望一个字符串

正如Mina指出的,&lt;embed src=&quot;http://stackoverflow.com&quot; style=&quot;width:500px; height: 700px;&quot;&gt;&lt;/embed&gt;在JavaScript中是语法错误。

你应该在浏览器的开发者工具的控制台中看到这个错误。

你需要为innerHTML分配一个string。将代码包裹在&#39;(或&quot;并转义数据中的&quot;)中。

= &#39;&lt;embed src=&quot;http://stackoverflow.com&quot; style=&quot;width:500px; height: 700px;&quot;&gt;&lt;/embed&gt;&#39;;

<embed>不适用于HTML文档

还要注意,根据MDN

> 请记住,大多数现代浏览器已经弃用并删除了对浏览器插件的支持,因此依赖于&lt;embed&gt;通常不明智,如果你希望你的网站在普通用户的浏览器上可操作。

考虑使用&lt;iframe&gt;

Stackoverflow禁止它

Stackoverflow有一个内容安全策略(CSP),禁止其他网站嵌入它。

英文:

There are at least four separate reasons your code doesn't work.

document doesn't support innerHTML

innerHTML is a property found on HTML elements. The document object is not an HTML element.

Consider document.body.innerHTML instead.

innerHTML expects a string

As pointed out by Mina, &lt;embed src=&quot;http://stackoverflow.com&quot; style=&quot;width:500px; height: 700px;&quot;&gt;&lt;/embed&gt; is a syntax error in JavaScript.

You should see this error reported in the Console of your browser's developer tools.

You need to assign a string to innerHTML. Wrap the code in &#39; (or &quot; and escape the &quot; in the data).

= &#39;&lt;embed src=&quot;http://stackoverflow.com&quot; style=&quot;width:500px; height: 700px;&quot;&gt;&lt;/embed&gt;&#39;;

&lt;embed&gt; isn't for HTML documents

Also note that according to MDN:

> Keep in mind that most modern browsers have deprecated and removed support for browser plug-ins, so relying upon &lt;embed&gt; is generally not wise if you want your site to be operable on the average user's browser.

Consider &lt;iframe&gt; instead.

Stackoverflow forbids it

Stackoverflow has a CSP that forbids other sites from embedding it.

答案2

得分: 2

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    document.body.innerHTML = '&lt;embed src=&quot;http://stackoverflow.com&quot; style=&quot;width:500px; height: 700px;&quot;&gt;&lt;/embed&gt;';

&lt;!-- end snippet --&gt;
英文:

you want to add an embed element to the body element of the document, so we need to access the body element explicitly.
Also, the HTML content should be enclosed in quotes.
It should be modified to:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.body.innerHTML = &#39;&lt;embed src=&quot;http://stackoverflow.com&quot; style=&quot;width:500px; height: 700px;&quot;&gt;&lt;/embed&gt;&#39;;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月6日 18:02:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/76188287.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定