Issue
I have a website with a page that contains links to pages in the same website. I need to have the link open in a new tab, with a CHAT button floating over the page in the new tab, or (if needed) sit at the top of the page. However, the button is not showing up on the new tab when it is opened.
The website is running on Ubuntu 18.04 with Nginx. Does anyone know what I can add or change to get it to show up?
I should add that I don't mind if the new page needs to be loaded into a thin border frame in order to make it work (e.g iframe) - as long as it dynamically adjusts to the size of the new page.
Here's how the code looks in each file: In one file (index9.php) I have the following code:
/// Get all links on the page
const links = document.querySelectorAll('a');
// Add an event listener to each link
links.forEach(link => {
link.addEventListener('click', (event) => {
// Prevent the default link behavior
event.preventDefault();
// Open the link in a new tab
const newTab = window.open('', '_blank');
newTab.location.href = link.href;
// Inject the floating button into the new tab's content document
newTab.document.addEventListener('DOMContentLoaded', () => {
const button = document.createElement('button');
button.innerHTML = 'Chat';
button.style.backgroundColor = 'green'; // Change the chat button background to green
button.onclick = function() {
// Open the chat window in a new tab
window.open('chat.php', '_blank');
};
newTab.document.body.appendChild(button);
});
});
});<h1>Welcome to My Website</h1>
<p><a href="about.html" target="_blank" onclick="executeScript()">About</a></p>Any suggestions are welcome.
I have tried numerous iterations. All of them result in the new page opening properly, but the floating button is not showing up there.
Solution
You won't be able to force the browser to append HTML overtop of a new tab due to browser security. An alternative would be to create a proxy page to handle displaying the page, and overlaying your chat button on that page.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Proxy Page</title>
<style>
#chatButton {
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px;
background-color: green;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<?php
// 'default.php' is page to load when no URL specified
$url = $_GET['url'] ?? 'default.php'; // get URL or set default
echo file_get_contents($url); // load content of URL
?>
<button id="chatButton" onclick="window.open('chat.php', '_blank');">Chat</button>
</body>
</html>
And if you want to keep the links on the initial page less confusing, you can do something like this:
<p><a href="https://example.com" class="new-tab-link">Example.com</a></p>
<p><a href="https://wikipedia.org" class="new-tab-link">Wikipedia</a></p>
<script>
const links = document.querySelectorAll('.new-tab-link');
links.forEach(link => {
link.addEventListener('click', (event) => {
event.preventDefault();
const proxyUrl = 'proxy.php?url=' + encodeURIComponent(link.href);
window.open(proxyUrl, '_blank');
});
});
</script>
If you would prefer not to use PHP, you can achieve the same thing with just JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Proxy Page</title>
<style>
iframe {
width: 100%;
height: 80vh;
border: none;
}
#chatButton {
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px;
background-color: green;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<iframe id="contentFrame" src=""></iframe>
<button id="chatButton" onclick="window.open('chat.php', '_blank');">Chat</button>
<script>
window.onload = function() {
var url = window.location.hash.substring(1); // Get URL from hash
document.getElementById('contentFrame').src = decodeURIComponent(url);
};
</script>
</body>
</html>
And the corresponding referrer page:
<p><a href="https://example.com" class="new-tab-link">Example.com</a></p>
<p><a href="https://wikipedia.org" class="new-tab-link">Wikipedia</a></p>
<script>
const links = document.querySelectorAll('.new-tab-link');
links.forEach(link => {
link.addEventListener('click', (event) => {
event.preventDefault();
const proxyUrl = 'proxy.html#' + encodeURIComponent(link.href);
window.open(proxyUrl, '_blank');
});
});
</script>
Answered By - Jacob
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.