Javascript pop up window with inner html does not open - javascript

My pop up window in javascript does not show any content. It does not even open. I've written innerHTML in the javascript pop up window by creating a div id(mainBody) for my tictactoe.html page.
HTML code for button that open popup window:
<input type="image" id="buttonimage2" alt="game2"
src="canon.png" onclick="newWindow();">
Javascript:
{
var newWindow = window.open("tictactoe.html", "myWindow", "width=500,height=700,status=yes,toolbar=no,menubar=no,location=no");
newWindow.focus();
newWindow.onload = function(){
let content = "<button class='btn btn-primary' onclick='window.print();'>Confirm</button>";
newWindow.document.getElementById('mainBody').innerHTML = content;
}
newWindow.window.close();
}
HTML code for tictactoe page that should be displayed in pop up window:
<head>
<link rel="stylesheet" href="style.css">
<script src="game.js"></script>
</head>
<body id="mainBody" >
It should be mentioned that my background for the main html page is a video, and I've made the position of all the elements on it absolute.

Related

Is there a way to refresh a webpage from inside a Mozilla Firefox extension

I am currently working on developing a Mozilla Firefox extension that blocks ads to learn more JavaScript, HTML, and CSS. Within the extension of that popup, I want to be able to click a button and refresh whatever page the browser is currently on. I have the buttons developed, and are currently interactive, but I am failing to see how I can extend the scope from the HTML I am using to see the webpage the browser is on.
Here is the most simplified state I have working:
popup.html
<!doctype html>
<hmtl>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
padding: 1em;
}
input {
margin-left: 1em;
margin-right: 1em;
}
</style>
</head>
<form>
<input type="button" value="Refresh">
<button onClick="document.location.href=window.location.href">Refresh Window</button>
<button onClick="document.location.href = 'popup.html' + '?' + Date.parse(new Date());">Refresh Page</button>
</form>
<p>Page hasn't been refreshed</p>
<script src="/popup1.js"></script>
</hmtl>
popup1.js:
const button = document.querySelector('input');
const paragraph = document.querySelector('p');
const mainBrowser = browser.document
button.addEventListener('click', refreshButton);
function refreshButton(){
button.disabled = true;
button.value="Refreshing"
paragraph.textContent = 'Page is refreshing';
// mainBrowser.reload();
window.setTimeout(function() {
button.disabled = false;
button.value = "Refresh"
paragraph.textContent = 'Page is up-to-date.';
}, 1000);
}
Image of what extension ui looks like, on clicking icon
The goal is to be able to click the Refresh Page button in the extension, and it reload whatever website my browser is currently on. I'm very new to JS, CSS, and HTML, and am failing to access things outside the scope of my extension.

How to print the specific <div> content in new window using javascript or jquery?

I have a simple html code which i used javascript.(If it is possible with jquery suggest me)
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "myWindow", "width=200,height=100");
myWindow.document.write(#tobePrint);
}
function closeWin() {
myWindow.close();
}
</script>
<!DOCTYPE html>
<html>
<body>
<div id="tobePrint">Print the content of this div content in new window.</div>
<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button>
</body>
</html>
The new window that I am trying is coming in new tab,i need the new window to come across the side of the tab.The content that is inside the div should be displayed in that new window.So i tried to myWindow.document.write(#tobePrint); access Id and tried to print but it is not working.
Here is Working solution:
var myWindow;
function openWin() {
myWindow = window.open("myWindow","newwin")
var tobePrint = $('#tobePrint').text();
myWindow.document.write('<p>' + tobePrint+ '</p>');
}
function closeWin() {
myWindow.close();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="tobePrint">Print the content of this div content in new window.</div>
<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button>
</body>
you can get div content from like code on the bottom line at opened window
window.opener.document.getElementById('tobePrint').innerHTML
get content of your "tobePrint" div from your child window. Write this code on your child window.
$(document).ready
(
function ()
{
alert(window.parent.document.getElementById('tobePrint').innerHTML);
}
);

how we can open a new browser window for preview of html

I am working on html and jquery . I am trying to open a new window of browser with my html code . I got some information regarding DOM window open method but that method always open a new tab but I want open a new different window . please anyone help me following is w3schools example for reference .
function myFunction() {
var w = window.open();
w.document.open();
w.document.write("<h1>Hello World!</h1>");
w.document.close();
}
You can use below code for open new window
<!DOCTYPE html>
<html>
<body>
<p>Click the button to open a new window called "MsgWindow" with some text.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");
}
</script>
</body>
</html>
Try this code
<script>
function nWin() {
var w = window.open();
var html = $("#toNewWindow").html();
$(w.document.body).html(html);
}
$(function() {
$("a#print").click(nWin);
});​
</script>
<div id="toNewWindow">
<p>Your content here</p>
</div>
Open Window

Opening a url inside a popup element (get new title and address bar)

I am looking to create something like this:
post 23
once a user click on this element
I want to fadein a popup div and load page post/23 html to it.
I want to title and address bar to change accrodingly to the new post page title and address bar.
Once I close the popup div, I want the title and address bad to be changed back.
I am sorry I don't have any code for you guys, I am looking for this for quite some time, and unable to find anything certain.
my best guess was using
http://dimsemenov.com/plugins/magnific-popup/documentation.html
can someone with experience performing something similar help me please?
1.
Include jQueryUI Dialog JS :
http://jqueryui.com/dialog/
2.
Append class, data-title attribute to your a link elemenets.
HTML:
<a class="alink" href="post/23" data-title="post23" >post 23</a>
<a class="alink" href="post/24" data-title="post24" >post 24</a>
3.
Javascript:
$(".alink").click(function () {
var dialog = $('<div title="' + $(this).attr('data-title') + '"></div>').dialog({
autoOpen: false,
hide: 'fade',
show: 'fade',
open: function (event, ui) {
$.ajax({
url: $(this).attr('href'),
cache: false,
success: function (html) {
$(dialog).html(html);
},
error: function () {
$(dialog).remove();
alert("Some Error MSG");
}
});
},
close: function () {
$(dialog).remove();
},
resizable: false,
width: 500,
modal: true
});
});
Now, Eachtime when you click on your link, a popup will open with fade effect, the title of dialog will come from your data-title attribute, and the dialog will get html from your post.
You can try the following:-
In the first html page, you'll have a link/button to open the popup, so first thing is we can't open the popup with bootstrap's attributes, because in that case can't catch the event when the modal will be opened or closed. So we'll add a click event. And in the modal, we'll have a iframe to open a separate page. So the page will be:-
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h2>Bootstrap 3.1.0 - Modal Demo</h2>
<div class="row text-center">
<h3>The Basic Modal</h3>
</div>
<hr>
</div>
<a class="btn btn-lg btn-success" data-btn-name="basic_modal" data-src="demo.html">Click to open Modal</a>
<div class="modal fade" id="basicModal">
<div class="modal-dialog">
<div class="modal-content">
<iframe id="frame" src=""></iframe>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="test.js"></script>
</body>
</html>
Now we'll have another html file, that'll be opened in the popup, and we'll fire an event to the parent window when the iframe will be loaded, so that we can get the title of the iframe.
<html>
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function onLoad(){
var event = new parent.CustomEvent('print:page:loaded', {detail : window});
parent.dispatchEvent(event);
}
</script>
</head>
<body onload="onLoad()">
<div>TODO write content</div>
</body>
</html>
Now in the javascript we'll listen to the event fired by the iframe and change the window title depending on it.
$(document).ready(function(){
var originalTitle,originalUrl;
$('[data-btn-name="basic_modal"]').click(function(evt){
if($('#basicModal').hasClass('in')){
window.document.title = originalTitle;
window.history.pushState('test', originalTitle, originalUrl);
}else{
$('#frame').attr('src',$(evt.currentTarget).attr('data-src'));
window.removeEventListener('print:page:loaded',function(){},false);
window.addEventListener('print:page:loaded', function(e){
originalTitle = window.document.title;
originalUrl = window.location.href;
window.document.title = e.detail.document.title;
window.history.pushState('test', e.detail.document.title, $(evt.currentTarget).attr('data-src'));
})
}
$('#basicModal').toggleClass('in');
});
})
Thank you all, I figured how to do it myself using history.js
this is how I did it:
var urlPath;
$('.post-image').on('click',function(){
urlPath = $(this).attr('href');
History.pushState({ action: 'show_popup' } , 'POST TITLE', urlPath);
return false;
});
History.Adapter.bind(window,'statechange',function() {
var State = History.getState();
if(State.data.action == "show_popup"){
//show dimmer
$("#lightbox").load(urlPath, function() {
//show content
});
}else{
// hide popup
}
});
$(document).on('click', function(event) {
// hiding popup if dimmer is clicked
if ((!$(event.target).closest('.post-info').length && !$(event.target).closest('.post-user').length)) {
History.back();
}
});`

ZeroClipboard doesn't work on popup page's button

I am wondering if there is any way that I can make ZeroClipBoard working on my popup page's buttons?I have the following code so far which will bring a popup page, the popup page is called from a php file include 2 buttons.
code for the first page:
<html>
<head>
<title>test</title>
<script type = "text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>
</head>
<body>
<div id="myDiv">This is the content to get copied to the text area and then to clipboard</div>
<button id="testButton" data-clipboard-target="myDiv"><b>Copy To Clipboard</b></button>
<!--<script type="text/javascript">
var clicks = 0;
</script>-->
<button onclick="launchPopUp('', '', 700, 'embedCode.php');">test button</button>
<!--<script>
function test123(){
if(clicks>=1){
alert(clicks);
var client = new ZeroClipboard( document.getElementById('copyAll') );
}
}
</script>-->
</body>
<script>
var client1 = new ZeroClipboard( document.getElementById('testButton') );
</script>
I have tried make the "copy to clipboard" for "testButton" button working on my first page by using ZeroClipboard.
my code for second page which will be the content for popup page:
<?php
session_start();
$userName = "asdfbsadf";//$_SESSION['user_name'];
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type = "text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>
</head>
<body>
<div id="copiedContent" style="border: 2px solid; margin: 30px 20px 10px 20px; padding: 4px 3px 5px 3px;">
Here will be the content and <?php echo $userName?> that be copied to the clipboard
</div>
<button id="copyAll" data-clipboard-target="copiedContent" style="float: right; margin-right: 20px;">Copy All</button>
<button style="float: right;" onclick="whatIsThis()">What Is This?</button>
<script>
function whatIsThis(){
alert("This is...");
}
</script>
</body>
<!--<script language="JavaScript">
var client = new ZeroClipboard( document.getElementById('copyAll') );
</script>-->
</html>
the "launchPopup()" function is called from an open source which called popUp2.0.js, if that js file is needed, I will post that, but that one is a 170 lines code.
The comment out codes above are the ones that I tried. I have tried add "var client = new ZeroClipboard( document.getElementById('copyAll') );" for my popup page's copyAll button to the second page, it didn't work; I tried to add that to first page, the button didn't work also.
I found that if the code "var client = new ZeroClipboard( document.getElementById('copyAll') );" is called after the button, that will work; but I have tried everything that I know to put it after the button, and when I run the page and click the test button to bring up the popup page, I found the code "var client = new ZeroClipboard( document.getElementById('copyAll') );" is always called before the button when I inspect the element.
I'm wondering if I have a function called test123(), is there any way that I can run this function after the button is clicked and the whole popup page is showed, so I can make the Javascript run after the popup page showed, and make the copyAll button working?
Or did I think that in a wrong way and my code is too bad? and if there have any way that can make it work I will appreciate as it's first time I use ZeroClipboard.
Have you tried calling the second function in the onclick event?
<button onclick="launchPopUp('', '', 700, 'embedCode.php'); test123();">test button</button>

Categories

Resources