I need to pass some text from the current page to a popup window without going for a server hit. The information (herewith represented by 90) is already available in the parent form (it's like a paragraph-long text which is stored in a hidden variable). I just need to display that as a popup.
Here's what I've tried, this works to some extent but doesn't work if I pass text, instead of a number. My second concern is that the solution kinda looks ugly. Any tips? Thank you.
This is SCCE, you can run it straight in your machine.
<html>
<head>
<title>A New Window</title>
<script type="text/javascript">
var newWindow;
var data;
function makeNewWindow(param) {
data = param;
if (!newWindow || newWindow.closed) {
newWindow = window.open("","sub","status,height=200,width=300");
setTimeout("writeToWindow()", 50); /* wait a bit to give time for the window to be created */
} else if (newWindow.focus) {
newWindow.focus( ); /* means window is already open*/
}
}
function writeToWindow() {
var k = data;
alert(data);
var newContent = "<html><head><title>Additional Info</title></head>";
newContent += "<body><h1>Some Additional Info</h1>";
newContent += "<scr"+"ipt type='text/javascript' language='javascript'> var localVar; localVar = "+ k +"; document.write('localVar value: '+localVar);</scr"+"ipt>";
newContent += "</body></html>";
// write HTML to new window document
newWindow.document.write(newContent);
newWindow.document.close( ); // close layout stream
}
</script>
</head>
<body>
<form>
<input type="button" value="Create New Window" onclick="makeNewWindow('90');" />
</form>
</body>
</html>
Actually, I googled and saw some other approach that uses window.opener.document.forms.element, but here, the window has to know in advance what it has to read from the parent. I need to be able to pass it as it will vary:
<textarea rows="15" name="projectcontent" id="projectcontent" cols="87"></textarea>
<b>View Content</b>
<head>
<title>View Project Content</title>
</head>
<body>
<img src="/images/toplogo.jpg"><br/>
<script language="Javascript">
document.write(window.opener.document.forms['yourformname'].elements['projectcontent'].value)
</script>
<img src="/images/bottomlogo.jpg">
</body>
</html>
use window.opener
From Mozilla Developer Network:
When a window is opened from another window, it maintains a reference
to that first window as window.opener. If the current window has no
opener, this method returns NULL.
https://developer.mozilla.org/en-US/docs/Web/API/window.opener
This way you can have on your original window a callback, and you can notify the window it's load and ready, rather than wait a random delay...
you add a function on the original window:
window.popupReady = function (callbackToPopup) {
callbackToPopup(newData);
}
then the popup can tell the parent window it's ready and pass it a callback to update it with data..
and on the popup try something like:
window.dataReady(newData)
{
alert(newData);
}
document.addEventListener("load", function() { window.opener.popupReady (dataReady); }
I didn't test this code, but I would take such a path as this should ensure the popupWindow is ready for you and is along the spirit of JavaScript.
In your onclick attribute you pass '90' to the function, but the function isn't set up to take an argument. So, change the first line of your function like this:
function writeToWindow(data) {
You don't need the global var data; or the local var k = data;, so get rid of them.
And instead of + k + write + data +.
That should do get your data passed.
Use this code, it works perfectly in all browsers .
#desc = parent text area id
#desc_textarea = popup
$("#desc_textarea").val(window.opener.$("#desc").val())
Related
Using the HTML below, how can I get a list of the functions in the <script> tag that is IN the #yesplease div. I don't want any other functions from other script tags. I don't want any global functions or native functions. What I'd like is an array with "wantthis1" and "wantthis2" only in it. I'm hoping not to have to use regex.
I am going to be emptying and filling the #yesplease div with different strings of html (including new script tags with new functions), and I need to make sure that I delete or "wantthis1 = undefined" each function in the script tag before filling it, programmatically, since I won't know every function name. (I don't want them to remain in memory)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function dontCare() {
// don't care
}
</script>
</head>
<body>
<div id="notthisone">
<p>
Hello
</p>
<script>
function dontwantthis () {
// nope
}
</script>
</div>
<div id="yesplease">
<p>
Hello again
</p>
<script>
function wantthis1 () {
// yes
}
function wantthis2 () {
// yes
}
</script>
</div>
<script>
// this function can be called by whatever, but this will look to
// see if functions exist, then call them, otherwise do something
// else
function onSaveOrWhatever () {
if (wantThis1 !== "undefined") {
wantThis1();
}
else {
// do something else (won't get called with above example)
}
if (wantThis3 !== "undefined") {
wantThis3();
}
else {
// do something else (will get called with above example)
}
}
</script>
</body>
</html>
Take innerHTML of all script tags you need
Create an iframe
Get a list of built-in functions of iframe.contentWindow object
Write the content of the script to the iframe created
Get a new list of the functions of iframe.contentWindow object
Find new functions added to the new list
Somehow it doesn't work in stack snippets but it works in Codepen link
var code = document.querySelector("#target script").innerHTML;
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var builtInFunctions = getFunctionsOfWindowObject();
var html = `<html><head><script>${code}</script></head><body /></html>`;
iframe.srcdoc = html;
var allFunctions = getFunctionsOfWindowObject();
var result = allFunctions.filter(function(n) {
return builtInFunctions.indexOf(n) < 0;
});
console.log(result);
function getFunctionsOfWindowObject() {
var functions = [];
var targetWindow = iframe.contentWindow;
for (var key in targetWindow) {
if (
targetWindow.hasOwnProperty(key) &&
typeof targetWindow[key] === "function"
) {
functions.push(key);
}
}
return functions;
}
iframe {
display: none;
}
<div id="target">
<script>
function wantthis1() {}
function wantthis2() {}
</script>
</div>
The are a few ways to solve this problem
Architect your application. Use react or vue (or even jquery) to add more control to your code/dom
AST parsing, which would be overkill
Hack it
If you hack it, the problem that you will face is that you are adding functions to global scope. This is shared by everyone, so you can't really monitor it in a nice way.
You can however take advantage of javascript singlethreadedness, and know that things won't happen in the background while you are doing monitoring tasks.
<script>
// take a cache of what is present before your script
window.itemsPresentBeforeScript = {};
foreach (var item in window) {
window.itemsPresentBeforeScript[item] = window[item];
}
</script>
<script> .... your other script </script>
<script>
// use your first cache to see what changed during the script execution
window.whatWasAddedInTheLastScript = {};
foreach (var item in window) {
if (!window.itemsPresentBeforeScript[item]) {
window.whatWasAddedInTheLastScript[item] = window[item];
}
}
delete window.itemsPresentBeforeScript;
// not you have a global list of what was added and you can clear it down when you need to
</script>
I have some response from a server and I have put the response in the content of iframe. Essentially what I need is the item number (see screenshot below), in this case it's 13.
So I tried doing console.log($("#iframe").contents()); which prints out:
I have tried looking through this but cannot find the item number. Is there a easier way to get to the body and obtain the number?
As I understand the question:
There is an <iframe>
The <iframe> has content in a string (i.e. item = 13) that's in a <pre>
But you just want the number from said string (i.e. 13);
The following Demo 1 accomplishes the objectives listed above using plain JavaScript and Demo 2 uses jQuery.
Note: jQuery can be significantly slower than JavaScript which is apparent when dealing with loading iframes. Keep in mind that iframes are the slowest part of your load time. If it doesn't look like you are getting the iframe at all, then run your iframe dependant functions at window.onload.
Also of note: both versions of the function getNumberFromFrame(iframe, target) are reusable. You can use this function on a single element within an iframe and if the target element has any text with numbers✎, it will extract those numbers regardless of the how the string is patterned.
ex. "item = 13" // 13
ex. "August 23, 2017" //23 2017
✎ Edited the regular expression on line 33 to replace non-number matches to a space.
Details are commented in Demo 1 and Demo 2
Demo 1: PLUNKER - Plain JavaScript
Demo 2: PLUNKER - jQuery
Demo 1 - Plain JavaScript: STACK
This is provided as site requires us to post code on the answer, be aware that this copy does not function due to SO security measures. Please review the functioning PLUNKER instead
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Parent Page</h1>
<iframe id='ifrm1' name='ifrm1' src='child_page.html' width='200' height='200' scrolling='no' frameborder="1"></iframe>
<br> Result:
<output id='display'></output>
<script>
/* Pass an iframe and it's targeted content as
|| selectors (e.g. "TAG", "#ID", ".CLASS", etc)
*/
function getNumberFromFrame(iframe, target) {
// Reference the iframe
var iFrm = document.querySelector(iframe);
/* Reference the iframe's Document Object by
|| using .contentDocument OR
|| .contentWindow.document properties
*/
var iDoc = iFrm.contentDocument || iFrm.contentWindow.document;
/* Now reference the target parameter with
|| the iframe's Document Object.
*/
var iSel = iDoc.querySelector(target);
// Get the target's text
var iTxt = iSel.textContent;
// Then filter out everything but numbers
var iNum = iTxt.replace(/^\D+/g, '');
// Ensure it is a number
iNum = parseFloat(iNum);
// Return number.
return iNum;
}
/* When Window Object is loaded:
|| Call getNumberFromFrame()
*/
window.onload = function() {
var result = getNumberFromFrame('#ifrm1', 'pre');
var view = document.getElementById('display');
view.textContent = result;
};
</script>
</body>
</html>
Demo 2 - jQuery: STACK
This is provided as site requires us to post code on the answer, be aware that this copy does not function due to SO security measures. Please review the functioning PLUNKER instead
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Parent Page</h1>
<iframe id='ifrm1' name='ifrm1' src='child_page.html' width='200' height='200' scrolling='no' frameborder="1"></iframe>
<br> Result:
<output id='display'></output>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script>
/* Pass an iframe and it's targeted content as
|| selectors (e.g. "TAG", "#ID", ".CLASS", etc)
*/
function getNumberFromFrame(iframe, target) {
/* .contents() method "opens" iframe
|| .find() will find the specified target
|| inside of iframe.
*/
var iEle = $(iframe).contents().find(target);
// Get text of target
var iTxt = iEle.text();
//console.log(iTxt);
/* Replace anything that's not a number with
|| nothing.
*/
var iNum = iTxt.replace(/^\D+/g, '');
// Ensure it is a number
//console.log(iNum)
var iRes = parseFloat(iNum);
// Return number.
return iNum;
}
// When Window Object is loaded...
/* Find the element with the id of #display
|| Set output#display text to the return of
|| getNumberFromFrame('#ifrm', 'pre')
*/
window.onload = function() {
$('#display').text(getNumberFromFrame('#ifrm1', 'pre'));
}
</script>
</body>
</html>
Here is a JQuery approach and it's very simple
// this will get you item = 13
var result = $("#iframe").contents().find("pre").html();
// this will get you 13
result = result.split("=")[1];
// 13
alert(result);
You can try this.
console.log($("#iframe")["0"].contentDocument.body.firstElementChild.innerText);
Working evidence
I'm a newbie with JavaScript and I asked a question earlier and got answers which helped me, but I thought I could incorporate it into the larger form I was working with and now I'm stuck again.
I have a large form with one select option. When the form is filled out, a new window opens and incorporates the values submitted into an invitation type page.
Everything else is working except for this select option. The problem I am having is depending on the selection, I want different text to be written into the new window (as part of the overall new window invitation page).
I'm really close, mostly b/c of help I received earlier today -- I can either get the new window to show just my named option value or I can get a whole new window with the different text (that is not part of the invitation page). I just can't combine the two.
I wrote up a smaller page in case someone wants to take a look at it. Thanks in advance.
<!doctype html>
<html>
<head>
<title>JavaScript Forms</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script type="text/JavaScript">
function newWindow() {
allInfo = open("", "displayWindow");
allInfo.document.open();
allInfo.document.write('<!doctype html><html><head><link rel="stylesheet" type="text/css" href="mystyle_invite.css"><title>Resume</title><meta charset="utf-8"> </head><body>');
allInfo.document.write(document.getElementById ('firstname').value);
allInfo.document.write('</body></html>');
allInfo.document.close();
}
function showName() {
var doIt=document.getElementById('firstname').value;
if ( doIt == "Michael" ) {
allInfo.document.write("Mr. " + doIt); //only "Mikey" is written out
}
else if ( doIt == "Sam" ) {
allInfo.document.write("Mrs. " + doIt);
}
else {
allInfo.document.write("Sir " + doIt);
}
}
</script>
</head>
<body>
<script type="text/JavaScript">
</script>
<form id="infoForm" method="post" name="infoForm">
<p>First Name:</p>
<p><select id="firstname" onChange="showName()" >
<option value="Mikey">nickname1</option>
<option value="Sammy">nickname2</option>
<option value="Sir Doug">nickname3</option>
</select></p>
<p> <input type="button" value="Submit Information" onClick="newWindow()"></p>
</form>
</body>
</html>
There are somethings that can help a lot here. First opening a second window can be a painful experience both for the user and the programmer. Unless you have an absolute need I would recommend manipulating the current window's DOM to display a popup instead.
Next if you can use DOM methods to change the page contents. document.write comes with a lot of problems which in your case are not apparent. Mainly it can erase you current DOM. You don't notice this in your example because the new window is blank so rewriting it is incidental.
Finally your use of allInfo is a quirky way to reference a global variable. It is not easily understood that this is happening from the style of code. In fact any linter will throw an error for your use of the global and will case an error if you declare "use strict" in your functions. Best to learn the good coding practises way.
Since we will want to interact with a variable (allInfo) in your case we should encapsulate the value in an object. This object can hold the state of that reference and offer some abstracted interactions with it. By doing so you avoid polluting the global name space and allow you to swap out your implementation without having to rewrite the parts of your program that depend on it.
// Our welcome window object
function WelcomeWindow() {
// save a reference to the content of your new window
// to be printed when ready. (Lazy execution)
this.innerHTML = '';
}
WelcomeWindow.prototype.open = function() {
this.win = window.open("", "displayWindow");
return this;
};
WelcomeWindow.prototype.close = function() {
this.win.close();
return this;
};
WelcomeWindow.prototype.write = function(html) {
this.innerHTML += '' + html;
return this;
};
WelcomeWindow.prototype.render = function() {
if (!this.win) { throw new Error("window has not been opened yet."); }
this.win.open();
this.win.write('<!doctype html><html><head><link rel="stylesheet" type="text/css" href="mystyle_invite.css"><title>Resume</title><meta charset="utf-8"> </head><body>');
this.win.write(this.innerHTML);
this.win.write('</body></html>');
this.win.close();
return this;
};
This allows us to declaratively manipulate the window before it is opened. For example if we want to add the name to the window:
function NameField(id) {
this.element = document.getElementById(id);
}
NameField.prototype.toString = function() {
var name = this.element.value;
switch (name) {
case 'Michael': return 'Mr. Michael';
case 'Sam': return 'Mrs. Sam';
default: return 'Sir ' + name;
}
};
NameField.prototype.toHtml = function() {
return '<strong>' + this.toString() + '</strong>';
};
Linking it together using code instead because adding events into the DOM only confuses the separation of markup and code.
window.onload = function() {
var form = document.getElementById('infoForm');
form.onsubmit = function(e) {
e.preventDefault();
var name = new NameField('firstName');
new WelcomWindow()
.write(name.toHtml())
.open()
.render();
return false;
};
};
I'm using Safari 6.0.5.
I open a new empty window, try to change the title to 'debug window', nothing happens. With a check function checking every 10 milliseconds, it says the window.document.title is 'Debug Window', still the new Window title bar says it is 'untitled'.
var debug_window = window.open('', 'debug_window', 'height=200');
debug_window.document.title = 'Debug Window';
function check()
{
debugLog(1, 'title:' + debug_window.document.title);
if(debug_window.document) { // if loaded
debug_window.document.title = "debug_window"; // set title
} else { // if not loaded yet
setTimeout(check, 10); // check in another 10ms
}
}
check();
The output in the debugLog is:
17:35:04.558: title:
17:35:04.584: title:debug_window
What is going wrong here that the new window is still called 'untitled'?
Thanks!
Now the second argument to window.open() is a frame/window-name and serves also as the default title. This is eventually overridden by the document loaded into this window. Opening the document-stream and inserting a basic html-document should serve the purpose:
var debug_window = window.open('', 'debug_window', 'height=200');
debug_window.document.open();
debug_window.document.write('<!DOCTYPE html>\n<html lang="en">\n<head>\n<title>Debug Window</title>\n</head>\n<body></body>\n</html>');
debug_window.document.close();
var debug_body = debug_window.document.getElementsByTagName('body')[0];
// write to debug_window
debug_body.innerHTML = '<p>Message</p>';
So you would be setting up a basic document inside the window, just as it would be loaded by the server (by writing to the "document stream"). Then you would start to manipulate this document like any other.
Edit: Does not work in Safari either.
Other suggestion: set up a basic document (including the title) on the server and inject the content into its body on load. As a bonus, you may setup CSS via stylesheets.
var debug_window = window.open('debug_template.html', 'debug_window', 'height=200');
debug_window.onload = function() {
var debug_body = debug_window.document.getElementsByTagName('body')[0];
debug_body.innerHTML = '...';
// or
// var el = document.createElement('p');
// p.innerHTML = '...';
// debug_body.appendChild(p);
debug_window.onload=null; // clean up cross-reference
};
And on the server side something like
<!DOCTYPE html>
<html lang="en">
<head>
<title>Debug Window</title>
<link rel="stylesheet" href="debug_styles.css" type="text/css" />
</head>
<body></body>
</html>
If this still should not work (e.g.: writing to the debug-window's document is without effect), you could call your app from inside the debug-window by something like:
<body onload="if (window.opener && !window.opener.closed) window.opener.debugCallback(window, window.document);">
</body>
(So you would check if the opener – your App – exists and hasn't been closed in the meantime and then call a callback-function "debugCallback()" in your app with the debug-window and its document as arguments.)
Try:
var debug_window = window.open('about:blank', 'debug_window', 'height=200');
I'm working on a web page where I'm making an AJAX call that returns a chunk of HTML like:
<div>
<!-- some html -->
<script type="text/javascript">
/** some javascript */
</script>
</div>
I'm inserting the whole thing into the DOM, but the JavaScript isn't being run. Is there a way to run it?
Some details: I can't control what's in the script block (so I can't change it to a function that could be called), I just need the whole block to be executed. I can't call eval on the response because the JavaScript is within a larger block of HTML. I could do some kind of regex to separate out the JavaScript and then call eval on it, but that's pretty yucky. Anyone know a better way?
Script added by setting the innerHTML property of an element doesn't get executed. Try creating a new div, setting its innerHTML, then adding this new div to the DOM. For example:
<html>
<head>
<script type='text/javascript'>
function addScript()
{
var str = "<script>alert('i am here');<\/script>";
var newdiv = document.createElement('div');
newdiv.innerHTML = str;
document.getElementById('target').appendChild(newdiv);
}
</script>
</head>
<body>
<input type="button" value="add script" onclick="addScript()"/>
<div>hello world</div>
<div id="target"></div>
</body>
</html>
You don't have to use regex if you are using the response to fill a div or something. You can use getElementsByTagName.
div.innerHTML = response;
var scripts = div.getElementsByTagName('script');
for (var ix = 0; ix < scripts.length; ix++) {
eval(scripts[ix].text);
}
While the accepted answer from #Ed. does not work on current versions of Firefox, Google Chrome or Safari browsers I managed to adept his example in order to invoke dynamically added scripts.
The necessary changes are only in the way scripts are added to DOM. Instead of adding it as innerHTML the trick was to create a new script element and add the actual script content as innerHTML to the created element and then append the script element to the actual target.
<html>
<head>
<script type='text/javascript'>
function addScript()
{
var newdiv = document.createElement('div');
var p = document.createElement('p');
p.innerHTML = "Dynamically added text";
newdiv.appendChild(p);
var script = document.createElement('script');
script.innerHTML = "alert('i am here');";
newdiv.appendChild(script);
document.getElementById('target').appendChild(newdiv);
}
</script>
</head>
<body>
<input type="button" value="add script" onclick="addScript()"/>
<div>hello world</div>
<div id="target"></div>
</body>
</html>
This works for me on Firefox 42, Google Chrome 48 and Safari 9.0.3
An alternative is to not just dump the return from the Ajax call into the DOM using InnerHTML.
You can insert each node dynamically, and then the script will run.
Otherwise, the browser just assumes you are inserting a text node, and ignores the scripts.
Using Eval is rather evil, because it requires another instance of the Javascript VM to be fired up and JIT the passed string.
The best method would probably be to identify and eval the contents of the script block directly via the DOM.
I would be careful though.. if you are implementing this to overcome a limitation of some off site call you are opening up a security hole.
Whatever you implement could be exploited for XSS.
You can use one of the popular Ajax libraries that do this for you natively. I like Prototype. You can just add evalScripts:true as part of your Ajax call and it happens automagically.
For those who like to live dangerously:
// This is the HTML with script element(s) we want to inject
var newHtml = '<b>After!</b>\r\n<' +
'script>\r\nchangeColorEverySecond();\r\n</' +
'script>';
// Here, we separate the script tags from the non-script HTML
var parts = separateScriptElementsFromHtml(newHtml);
function separateScriptElementsFromHtml(fullHtmlString) {
var inner = [], outer = [], m;
while (m = /<script>([^<]*)<\/script>/gi.exec(fullHtmlString)) {
outer.push(fullHtmlString.substr(0, m.index));
inner.push(m[1]);
fullHtmlString = fullHtmlString.substr(m.index + m[0].length);
}
outer.push(fullHtmlString);
return {
html: outer.join('\r\n'),
js: inner.join('\r\n')
};
}
// In 2 seconds, inject the new HTML, and run the JS
setTimeout(function(){
document.getElementsByTagName('P')[0].innerHTML = parts.html;
eval(parts.js);
}, 2000);
// This is the function inside the script tag
function changeColorEverySecond() {
document.getElementsByTagName('p')[0].style.color = getRandomColor();
setTimeout(changeColorEverySecond, 1000);
}
// Here is a fun fun function copied from:
// https://stackoverflow.com/a/1484514/2413712
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
<p>Before</p>