enniosousa/embed-google-docs.html

## embed-google-docs.html
<!DOCTYPE html>
<html>

<head>
    <title>Parent Document</title>
    <script>
        /**
         * @link https://dev.to/admitkard/google-docs-url-tricks-and-tips-4d44
         * @link https://web.archive.org/web/20240523160018/https://dev.to/admitkard/google-docs-url-tricks-and-tips-4d44
         */
        function createOrGetIframe() {
            var iframe = document.getElementById('myIframe');
            if (!iframe) {
                iframe = document.createElement('iframe');
                iframe.id = 'myIframe';
                iframe.width = '100%';
                iframe.height = '600px';
                iframe.frameborder = '0';
                document.body.appendChild(iframe);
            }
            return iframe;
        }

        const docId = '1VduggFiOAmWcfNi2rO86FIZbzAbpGxkGOv2c10LLQ5U';
        const editUrl = `https://docs.google.com/document/d/${docId}/edit`;
        const previewUrl = `https://docs.google.com/document/d/${docId}/preview`;

        function editor(type) {
            const u = new URL(editUrl);
            u.searchParams.set('widget', true);

            // adicione o email do usuario que faz edição para evitar problemas de permissão
            // caso o usuario faça login com uma conta não primária no navegador
            // u.searchParams.set('authuser', 'user@example.com');

            /**
             * rm param values:
             * The editor is composed by titlebar, menubar, toolbar
             * options and their effects are as follows:
             * - embedded: includes all
             * - demo: includes the menubar, toolbar | excludes the titlebar
             * - minimal: excludes all
             */
            u.searchParams.set('rm', type);

            var iframe = createOrGetIframe();
            iframe.src = u.toString();
        }

        function preview() {
            var iframe = createOrGetIframe();
            iframe.src = previewUrl;
        }

    </script>
</head>

<body onload="preview">
    <h1>This is the parent document</h1>
    <button type="button" onclick="editor('embedded')">Editor (embedded)</button>
    <button type="button" onclick="editor('demo')">Editor (demo)</button>
    <button type="button" onclick="editor('minimal')">Editor (minimal)</button>
    <button type="button" onclick="preview()">Preview</button>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Parent Document</title>
	<script>
	/**
	* @link https://dev.to/admitkard/google-docs-url-tricks-and-tips-4d44
	* @link https://web.archive.org/web/20240523160018/https://dev.to/admitkard/google-docs-url-tricks-and-tips-4d44
	*/
	function createOrGetIframe() {
	var iframe = document.getElementById('myIframe');
	if (!iframe) {
	iframe = document.createElement('iframe');
	iframe.id = 'myIframe';
	iframe.width = '100%';
	iframe.height = '600px';
	iframe.frameborder = '0';
	document.body.appendChild(iframe);
	}
	return iframe;
	}

	const docId = '1VduggFiOAmWcfNi2rO86FIZbzAbpGxkGOv2c10LLQ5U';
	const editUrl = `https://docs.google.com/document/d/${docId}/edit`;
	const previewUrl = `https://docs.google.com/document/d/${docId}/preview`;

	function editor(type) {
	const u = new URL(editUrl);
	u.searchParams.set('widget', true);

	// adicione o email do usuario que faz edição para evitar problemas de permissão
	// caso o usuario faça login com uma conta não primária no navegador
	// u.searchParams.set('authuser', 'user@example.com');

	/**
	* rm param values:
	* The editor is composed by titlebar, menubar, toolbar
	* options and their effects are as follows:
	* - embedded: includes all
	* - demo: includes the menubar, toolbar \| excludes the titlebar
	* - minimal: excludes all
	*/
	u.searchParams.set('rm', type);

	var iframe = createOrGetIframe();
	iframe.src = u.toString();
	}

	function preview() {
	var iframe = createOrGetIframe();
	iframe.src = previewUrl;
	}

	</script>
	</head>

	<body onload="preview">
	<h1>This is the parent document</h1>
	<button type="button" onclick="editor('embedded')">Editor (embedded)</button>
	<button type="button" onclick="editor('demo')">Editor (demo)</button>
	<button type="button" onclick="editor('minimal')">Editor (minimal)</button>
	<button type="button" onclick="preview()">Preview</button>
	</body>

	</html>