使用 <iframe> 创建 Firebase 博客文章答案

【问题标题】：Create Firebase Blog Post with <iframe>使用 <iframe> 创建 Firebase 博客文章
【发布时间】：2021-01-19 13:32:08
【问题描述】：

我的网站上有一个 Firebase 博客。现在我想在上面发布 iframe。我的想法是将它们像 JavaScript 中的其他 p 标签一样推送到 HTML 中，然后将链接写入数据库而不使用框架标签……但它没有用。有谁知道为什么？这是没有框架标签的代码：

我有以下 JavaScript 代码：

let postCollection = document.querySelector("#posts-collection");

  const db = firebase.firestore();
  
  function createPost(title, time, content) {
    let div = document.createElement("div");
    div.setAttribute("class", "col-md-4");
  
    let h2 = document.createElement("h2");
    let p = document.createElement("p");
    let small = document.createElement("small");
  
    h2.textContent = title;
    small.textContent = time;
    p.textContent = content;
  
    div.appendChild(h2);
    div.appendChild(small);
    div.appendChild(p);
  
    postCollection.appendChild(div);
  }
  
  // Get Posts
  function getPosts() {
    db.collection("posts")
      .get()
      .then(snapshot => {
        snapshot.docs.forEach(docs => {
          createPost(
            docs.data().postName,
            docs.data().createdAt,
            docs.data().postContent
          );
        });
      })
      .catch(err => {
        console.log(err);
      });
  }
  
  getPosts();

以及下面的 HTML：

 <div class="blog" id="blog">
                    <h1>Blog</h1>
                  <!-- Example row of columns -->
                  <div class="row" id="posts-collection"></div>
                </div>

【问题讨论】：

标签： javascript html firebase google-cloud-firestore

【解决方案1】：

这是我发布 iframe 的想法：

let postCollection = document.querySelector("#posts-collection");
    
      const db = firebase.firestore();
      
      function createPost(title, time, content, link) {
        let div = document.createElement("div");
        div.setAttribute("class", "col-md-4");
      
        let h2 = document.createElement("h2");
        let p = document.createElement("p");
        let small = document.createElement("small");
        let frame = document.createElement("iframe"); 
      
        h2.textContent = title;
        small.textContent = time;
        p.textContent = content;
        iframe.textContent = link
      
        div.appendChild(h2);
        div.appendChild(small);
        div.appendChild(p);
        div.appendChild(iframe)
      
        postCollection.appendChild(div);
      }
      
      // Get Posts
      function getPosts() {
        db.collection("posts")
          .get()
          .then(snapshot => {
            snapshot.docs.forEach(docs => {
              createPost(
                docs.data().postName,
                docs.data().createdAt,
                docs.data().postContent
              );
            });
          })
          .catch(err => {
            console.log(err);
          });
      }
      
      getPosts();

【讨论】：