I have a js rendered in HTML which would give a preview of the form. The code is functioning correctly but it gives me the output on the same page rather i want to open it in a pop-up window. I have tried using window.open () with no luck. Could you please help me out in how i can use window.open() for the below. The button ID is preview. When the button is clicked it executes a function similar to below
$("#preview").click(function() {
$("#formpreview").delete();
var fieldSet = ...................});
You can populate the html in the child window using the below example:
HTML
<!DOCTYPE Html />
<html>
<head>
<title></title>
</head>
<body>
<input type="button" id="launch" value="Launch Child Window"/>
<script type="text/javascript" src="theJS.js"></script>
</body>
</html>
JavaScript
var btnLaunch = document.getElementById("launch");
btnLaunch.onclick = function () {
var childWindow = window.open("", "", "height=500, width=500");
var html = "";
var theVariable = "Conent in Child Window";
html += "<p>" + theVariable + "</p>";
childWindow.document.body.innerHTML = html;
}
Store the popup as a variable, then set the popup's HTML to whatever you need.
$("#preview").click(function() {
var myWindow = window.open("", "Popup", "width=300, height=500");
myWindow.document.write("<html>This is where your content goes</html>");
});
Related
I am trying to get the source code(HTML code) of the current browser through a chrome extension. I was trying to store this HTML code in a string, but it doesn't seem to work.
http://jsfiddle.net/ufbxge08/2/
<head>
<style>
button {
height: 30px;
width: 100px;
outline: none;
}
</style>
</head>
<body>
<button id="bth1">Predict</button>
<script src="popup.js"></script>
<script src="jquery-2.0.3.js"></script>
<form>
<label id = 'mybtn1'></label>
</form>
JavaScript:
btn1.onclick = function scrapeThePage() {
// Keep this function isolated - it can only call methods you set up in content scripts
var htmlCode = document.documentElement.outerHTML;
var btn = document.getElementById("mybtn1");
btn.innerHTML = htmlCode;
console.log(htmlCode)
}
I expected the code to store the source code in a string but it doesn't seem to work.
If you want to show HTML code inside an HTML element you may need to set the text content (innerText), not the HTML content (innerHTML):
bth1.onclick = function scrapeThePage() {
// Keep this function isolated - it can only call methods you set up in content scripts
var htmlCode = document.documentElement.outerHTML;
var btn = document.getElementById("mybtn1");
btn.innerText = htmlCode;
}
http://jsfiddle.net/1jk94r50/
For example right, Google website.
I had found that Search textbox is name=q and Search button is name=btnK.
I am managed to open the browser by using the
var wdw = window.open(url, "_blank");
But I can't populate the data into the textbox as well as trigger the button.
I have tried like
wdw.document.getElementsByName("q").value = "something";
But still failed, please kindly advise. Thanks
2nd Attempt
var vWindow = window.open(GOOGLE_SITE, "_blank");
vWindow.onload = function() {
vWindow.document.getElementsByName("q").value = "Find ABC";
}
You meet the problem of security. Protocol, domain, etc
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
Another approach:
<!DOCTYPE html>
<html>
<body>
<button onclick="openNewWindow()">Open window</button>
<script>
function openNewWindow() {
// Open new window
var newWindow = window.open("", "My New Window", "width=500,height=500");
newWindow.document.write("<p>My New Widown</p>");
newWindow.document.write("<input type='text' id='name' />");
newWindow.document.write("<button id='ok'>OK</button>");
// populate the data into the textbox
newWindow.document.getElementById('name').value = "Test";
// Listen button click event
var btn = newWindow.document.getElementById('ok');
btn.addEventListener('click', clickOk);
}
function clickOk(){
console.log("Ok Click");
}
</script>
</body>
</html>
I have looked for duplicate questions, however many refer to adding data to XML
please forgive me if I have missed something here but I need some help
so far I have this:
html page
<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<script type="text/javascript" src="script/controlpanelAdmin.js"></script>
<script type="text/javascript" src="script/controlpanelModerator.js"></script>
<script type="text/javascript" src="script/jquery-1.12.0.js"></script>
<link rel="stylesheet" href="script/css.css" />
</head>
<body>
<fieldset id="control_panel">
<legend>Control Panel</legend>
</fieldset>
<p id="content"> Content </p>
</body>
</html>
controlpanelAdmin.js
window.onload = function() {
var controlpanel = document.getElementById("control_panel");
var para = document.createElement("p");
var att = document.createAttribute("admin");
var br = document.createElement("br");
var txt = document.createTextNode("Admin Control Panel");
controlpanel.appendChild(para);
para.setAttribute("id", att);
para.appendChild(txt);
para.appendChild(br);
}
controlpanelModerator.js
window.onload = function() {
var controlpanel = document.getElementById("control_panel");
var para = document.createElement("p");
var att = document.createAttribute("mod");
var br = document.createElement("br");
var txt = document.createTextNode("Moderator Control Panel");
controlpanel.appendChild(para);
para.setAttribute("id", att);
para.appendChild(txt);
para.appendChild(br);
}
When the page loads, 'Admin Control Panel' is written into the fieldset tag
but is then replaced by: 'Moderator Control Panel'
I cannot for the life of me think how to append both lines (and maybe other data as well) into one element
When the page loads, 'Admin Control Panel' is written into the fieldset tag but is then replaced by: 'Moderator Control Panel'
That can't happen. Admin Control Panel should never appear in the page.
script/controlpanelAdmin.js loads. It causes a value to be assigned to window.onload.
script/controlpanelModerator.js loads. It causes that value to be overwritten with a new one.
The page finishes loading
The load event fires
The function defined in script/controlpanelModerator.js is called
Don't assign values to window.onload. Use addEventListener instead.
addEventListener("load", function () { ... });
You've got two onload functions competing. Can you merge them into one function?
Hi all i want to document.write a hyperlink image inside getjson i tried the following but it doesnt work. could you guys tell me what is wrong with my document write?
<script>
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
document.write("<a id="ok" href="http://www.mysite.com/master.m3u8?+siteContents+"><img src="./playicon.jpg"></a>");
});
</script>
Hi all i want to document.write a hyperlink image inside getjson
You can't (not reasonably*). document.write only works during the initial parsing of the page. If you use it after the page finishes loading, it completely replaces the page.
Instead, interact with the DOM. Several ways to do that, but the most obvious based on your code is to have the anchor initially-hidden and then show it after filling in the text area like this:
$("#ok").show();
Full Example: Live Copy | Live Source
(I've changed the playicon.jpg to your gravatar, since otherwise it shows as a broken image on JSBin)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form name="myform">
<textarea name="outputtext"></textarea>
</form>
<a id="ok" style="display: none" href="http://www.mysite.com/master.m3u8?+siteContents+"><img src="http://www.gravatar.com/avatar/f69cfb4677f123381231f97ea1138f8a?s=32&d=identicon&r=PG"></a>
<script>
(function($) {
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents;
// shows the link
$("#ok").show();
});
})(jQuery);
</script>
</body>
</html>
* "not reasonably": IF your content were coming from the same origin as the document (it doesn't look like it is), you could do this with a synchronous ajax call. But that would be very bad design.
Please, use createElement instead of document.write
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
//Create A-Element
var link = document.createElement('a');
link.setAttribute('href', 'http://www.mysite.com/master.m3u8?' + encodeURIComponent(siteContents) );
link.id = 'ok';
//Append A-Element to your FORM-Element
var myForm = document.getElementsByTagName('form')[0];
myForm.appendChild(link);
//Create IMG-Element
var img = document.createElement('img');
img.setAttribute('src', './playicon.jpg');
//Append IMG-Element to A-Element (id='ok')
link.appendChild(img);
});
I'm opening a popup using popup = window.open(....) and then trying to insert some html into a div in the popup.
popup.document.getElementById('div-content').innerHTML = "hello world"; doesn't do anything however, popup.document.getElementById('the-field').value = "Hello There"; changes the content of a field with an id="the-field".
Any idea why one is working but not the other? How can i replace the content of the div?
hope you can help.
EDIT:
the popup
<!DOCTYPE html>
<html>
<head>
<title>Report</title>
<meta charset="utf-8">
</head>
<body>
<header>
</header>
<div id="div-content"></div>
<div id="report-container">
<input type="text" id="the-field" name="the_field"/>
</div>
<footer>
</footer>
</body>
</html>
the code
function reportComplete(report_content)
{
var popup;
var template_path;
template_path = base_url + "application/views/secure/reports_preview.php";
popup = window.open(template_path, "Report", "scrollbars=yes ,resizable=yes");
popup.document.getElementById('the-field').value = "Hello There"; // this works
popup.document.getElementById('div-content').innerHTML = "hello world";
}
...or simply:
<script type="text/javascript">
function reportComplete(report_content)
{
var popup;
var template_path;
template_path = base_url + "application/views/secure/reports_preview.php";
popup = window.open(template_path, "Report", "scrollbars=yes,resizable=yes");
popup.window.onload = function() {
popup.document.getElementById('the-field').value = "Hello There";
popup.document.getElementById('div-content').innerHTML = "hello world";
}
}
</script>
I think the problem here is that the document in the popup windows hasn't finished loading when you try to access a part of it. On my machine, neither of the divs can be accessed with the provided code.
If the content you want to insert is fixed, then just do all these changes on the popup page itself so that you can make it happen only when the document is completely loaded. If you need to send some dynamic contents, the easiest approach may be using query strings.
UPDATE:
There is a way to fire up DOM manipulation function only when the popup finishes loading. First, you need a callback function on the main window, and put all the DOM manipulation code there:
window.callback = function(doc) {
doc.getElementById('the-field').value = "Hello there";
doc.getElementById('div-content').innerHTML = "Hello world";
}
Then, simply bind a function call to the body onload event on the popup window:
<script type="text/javascript">
function loaded() {
window.opener.callback(document);
}
</script>
<body onload="loaded();"><!-- body content --></body>