可编辑的嵌入式谷歌文档答案

【问题标题】：Editable embedded google doc可编辑的嵌入式谷歌文档
【发布时间】：2018-03-21 01:39:15
【问题描述】：

我正在创建一个网站来指导我学校的人，我需要嵌入一个 google 文档，以便访问该页面的任何人都可以在使用他们的 google 帐户登录后进行编辑。我现在拥有它的方式，它不可编辑，但它确实嵌入。有谁知道如何做到这一点，甚至可以做到吗？这是我目前所拥有的。

&lt;iframe src="GOOGLE-DOC-URL" height = "1000" width = "1000"&gt;&lt;/iframe&gt;

我公开并发布了该页面，我对此进行了很多研究，发现在 iframe 语句中添加“无缝”过去是可行的，但现在显然已弃用，我尝试了，它确实如此不行。谢谢。

【问题讨论】：

您好，您需要添加带有参数 embedded=true 的 url

标签： javascript html iframe web doc

【解决方案1】：

首先，您需要使用此参数添加 URL google doc：

https://docs.google.com/document/d/KEY/pub?embedded=true

其次，我进行 ajax 调用以从 google doc api 获取信息和响应：

https://codepen.io/headmax/pen/dVeMmE

创建您自己的页面：API 文档将在 HR html 元素之后打印

html页面：

<html>
<body>
<h1>The text below is pulled live from Google Docs</h1>
<h4>If there is an update to the doc and you refresh the page, it should update.</h4>
<hr>
<script>
function get_information(link, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", link, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            callback(xhr.responseText);
        }
    };
    xhr.send(null);
};

//Now initilisation and call & working from the anonyme callback function with dom response :

get_information("https://docs.google.com/document/d/1yf5plpYBYsBMCaeeDpTkapgR8jZtg4XCfiTvRG5qRWY/pub?embedded=true", function(text) {
    var div = document.createElement("div");
    div.innerHTML = text;

    // Remove css that comes with Google Doc embeds
    // If you want the Google Doc styling, comment these out
    div.removeChild(div.childNodes[1]);
    div.removeChild(div.childNodes[0]);

    document.body.appendChild(div);
    document.body.appendChild(document.createElement("hr"));
  }
 );
</script>
</body>
</html>

【讨论】：

我嵌入了=true。那么这个 Ajax 语句在 div 元素中的作用是什么？我该怎么办？
首先在示例中添加您的 url API 以加载您自己的 google doc，然后可以通过 ajax 调用读取 doc，并且此 ajax 的返回是您的文档 google doc 的输出。只需尝试替换 URL“示例中的红色”即可。问候。（这不是一个有效的网址：GOOGLE-DOC-URL）
这是 codepen.io 的一个例子，因为它没有按我的意愿运行。 codepen.io/headmax/pen/dVeMmE
这里是一个新的例子：URL 将 api google doc 指向 docs.google.com/document/d/… 和结果到这里 codepen.io/headmax/pen/BwxKOL 等等 ...
好的，这在单个文档中看起来如何？代码笔并没有真正帮助我。我是网络开发的新手。为什么 HTML、CSS 和 JS 被分成 3 个单独的字段？如何进行 ajax 调用？我查了一下，我很难理解如何将它放入我的 html 文档中。