ravisiyer/bb.html

## bb.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body onload="afterLoad()">
    BB document
    <script>
      function afterLoad() {
        // Ref: https://coderanch.com/t/116057/languages/popup-fully-loaded
        window.opener && window.opener.writeBB();
      }
    </script>
  </body>
</html>

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blogger Feed to HTML Book</title>
  </head>
  <body class="input-parameters">
    <main id="main" class="main-form">
      <form id="form">
        <input type="submit" id="show-blog-book" value="Show Blog Book" />
        <p>Status: <span id="form-alert" class="form-alert"></span></p>
      </form>
    </main>
    <script src="script.js"></script>
  </body>
</html>

## script.js
const mainElm = document.getElementById("main");
const formEl = document.getElementById("form");
const showBlogBookBtn = document.getElementById("show-blog-book");
const formAlertElm = document.getElementById("form-alert");

let newWindow;
// Ref: https://coderanch.com/t/116057/languages/popup-fully-loaded
function writeBB() {
  console.log("writeBB function called");
  let html = `<div style="font-size:30px">Welcome!</div>`;
  if (newWindow.document.body) {
    newWindow.document.body.insertAdjacentHTML("afterbegin", html);
  } else {
    alert("BB window document not defined");
  }
}

function handleFeed() {
  newWindow = window.open("bb.html", "BbWin");

  // Below onload does not seem to get invoked at all!
  // https://javascript.info/popup-windows#accessing-popup-from-window
  // Has to have () Ref: https://www.plus2net.com/javascript_tutorial/window-onload.php
  // newWindow.onload = writeBB();
}

formEl.addEventListener("submit", async (e) => {
  e.preventDefault();
  formAlertElm.innerHTML = "";

  formAlertElm.innerHTML = "Calling handleFeed()";
  handleFeed();
});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body onload="afterLoad()">
	BB document
	<script>
	function afterLoad() {
	// Ref: https://coderanch.com/t/116057/languages/popup-fully-loaded
	window.opener && window.opener.writeBB();
	}
	</script>
	</body>
	</html>
	const mainElm = document.getElementById("main");
	const formEl = document.getElementById("form");
	const showBlogBookBtn = document.getElementById("show-blog-book");
	const formAlertElm = document.getElementById("form-alert");

	let newWindow;
	// Ref: https://coderanch.com/t/116057/languages/popup-fully-loaded
	function writeBB() {
	console.log("writeBB function called");
	let html = `<div style="font-size:30px">Welcome!</div>`;
	if (newWindow.document.body) {
	newWindow.document.body.insertAdjacentHTML("afterbegin", html);
	} else {
	alert("BB window document not defined");
	}
	}

	function handleFeed() {
	newWindow = window.open("bb.html", "BbWin");

	// Below onload does not seem to get invoked at all!
	// https://javascript.info/popup-windows#accessing-popup-from-window
	// Has to have () Ref: https://www.plus2net.com/javascript_tutorial/window-onload.php
	// newWindow.onload = writeBB();
	}

	formEl.addEventListener("submit", async (e) => {
	e.preventDefault();
	formAlertElm.innerHTML = "";

	formAlertElm.innerHTML = "Calling handleFeed()";
	handleFeed();
	});