You can try this, I haven't tested it so not sure if it will work. Just a basic idea using innerhtml to wrap the possible_url field with an iframe.
<!DOCTYPE html>
<html>
<head>
<title>Quickbase Data Retriever</title>
</head>
<body>
<label for="inputField">Enter Record ID or Search Term:</label><br>
<input type="text" id="inputField"><br><br>
<button id="retrieveButton">Retrieve Data</button>
<div id="result"></div>
<script>
document.getElementById('retrieveButton').addEventListener('click', function() {
const inputValue = document.getElementById('inputField').value;
const appDbId = 'XXXXXXXXXXX'; // Replace with your Quickbase App DBID
const tableDbId = 'XXXXXXXX'; // Replace with your Quickbase Table DBID
const targetFieldId = '6'; // THIS IS THE formula URL field
const queryFieldId = '37'; // Replace with the FID of the field to query against
const userToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
const apiUrl = `https://xxxxxxxxxxx.quickbase.com/db/${tableDbId}?a=API_DoQuery&query={'${queryFieldId}'.EX.'${inputValue}'}&clist=${targetFieldId}&usertoken=${userToken}`;
fetch(apiUrl)
.then(response => response.text()) // Quickbase returns XML
.then(xmlStr => {
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStr, "application/xml");
const statusNode = xmlDoc.querySelector("possible_url");
if (statusNode) {
document.getElementById('result').innerHTML = `<iframe src="${statusNode.textContent}" width="100%" height="600px" frameborder="0"></iframe>`;
} else {
document.getElementById('result').textContent = "No field found in response.";
}
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result').textContent = 'An error occurred during the API call.';
});
});
</script>
</body>
</html>