I have an application that produces many pages of content. In order to expedite review of the process, I have a linkbutton that opens a child window starting at the page I'm on so reviewers can enter comments. I open the child window in javascript
objCmtWindow = window.open(MyURL, "comments", "width=800,height=600,menubar=no,toolbar=no,status=no,location=no,resizable=yes,scrollbars=yes,directories=no");
objCmtWindow.focus();
The child window has some javascript (an excerpt from a larger script) to listen to an API in the parent window so that it can know what to load
function updtSlide(){
if(window.opener.MyAPI)
{
window.opener.MyAPI.addEventListener("MyEnterBtn", function(e)
{
updtContent();
});
}
}
It works on load to grab the data with the function updtContent as part of the page load. When I click for the next page (MyEnterBtn) in the parent window, the child window is not updating for the next page data it needs to display. Is there a piece I'm missing to poll the parent window? Since the parent can operate independantly of the child, I really can't put the command in the next page button. I know the API is working correctly and emitting next page events.
Thank You
In the js function, the first 'opener' is spelled wrong.
Related
My parent page js file script:
var PopupConnect = window.open("http://localhost:8080");
var popup_function = PopupConnect.CreateText();
My popup page js file script:
function CreateText() {
var text = "random text";
return json({
result: text
})
}
This js line in parent page runs fine which triggers a new tab in the browser:
PopupConnect = window.open
The error I am getting is in the line after it:
Uncaught TypeError: PopupConnect.CreateText is not a function
How can I call the js function in child page from the parent page js correctly? Is that even possible? And how can I pass back the result from CreateText function to the parent page js?
NOTE: The parent page is running on Python server & the child popup page is running on Node.js server. Both pages of course are opened in the same browser.
Some people might suggest using localStorage.setItem and localStorage.getItem method but it doesn't work the two pages are running on different localhost ports and of course in production they will be running on different domains. FYI I have already tried this method and it didn't work.
UPDATE:
**I ended up using window.postMessage in parent page & have put addEventListener in child popup so once it receives the message it runs the js function. Now the issue I am facing is with timing things.
How can I insert a delay after window.open is called so the child page has time to fully load before parent page runs window.postMessage? I know there is something called 'await' but I assume this is for JS being used as backend not frontend? What is the best approach for this timing issue?**
You can try it with Window.postMessage . hope to help you
Create an event listener in parent page & child page.
Send:
Parent page sends -----message----> to child page (event listener)
Reply:
Child page sends -----message----> to parent page (event listener)
Update : about timming new page onload : you can send a message from new page to parent page when ready
On Button Click I am calling this JavaScript Method from Child(aspx) page.
function closechildwindow() {
window.opener.document.forms(0).submit();
self.close();
}
Its closes the child Page and its also makes a post back on the parent page. But the parent page is open in a separate Tab.
I don't want this. I want that post back to happen on parent page in same tab that is already open, and should not open in new tab.
Please help me
What you need is calling the __doPostBack() Javascript function on the parent window:
window.opener.__doPostBack();
So I have a web page with some photos of people. When you click on a photo of the person the JavaScript is executed and produces a popup with some more detailed information such as a description etc.
The link for each photo is as follows:
First I want to start with the basics, of just extracting the description etc. from one single person. So I want to execute the JavaScript above to write the popup window, and when I'm on the popup window I can then extract the content of the div's on the popup.
I've looked at PhantomJS and I really don't know where to start. I've used Cheerio to get some simple information from the page, and I want to move on to executing the popup window through JS and then extracting data from that.
Any help would be appreciated as I'm a bit of a newbie to screen scraping in general.
You can do this analogous to how CasperJS does it.
page.open(yourUrl, function(success){
// mainPage is loaded, so every next page could be a popup
page.onPageCreated = function onPageCreated(popupPage) {
popupPage.onLoadFinished = function onLoadFinished() {
popupPage.evaluate(function(){
// do something in popup page context like extracting data
});
};
};
// click to trigger the popup
page.evaluate(function(){
document.querySelector("a.seeMore").click();
// or something from here: http://stackoverflow.com/questions/15739263/phantomjs-click-an-element
});
});
Do not forget to overwrite/nullify page.onPageCreated before navigating away from the main page.
I am building a website that is navigated through a series of directional buttons. Right and left clicks move between different images associated with one project. Up and down clicks move between projects.
What I am trying to do is ensure that when a user clicks up or down (i.e. between projects) that this is registered as a history traversal event and that a new entry for the new project is visible within the browser's history.
The code that I have sets an event on the the click of the navigation buttons that makes the necessary changes to the pages content, and then I attempt to push the new page to the history object by calling this function (see here and here for background information):
var pushToHistory = function(url, pageTitle, html) {
history.pushState({'html':html, 'pageTitle':pageTitle}, '', url);
}
I supply the arguments to this function elsewhere by doing the following after the page has loaded the new content:
html = document.getElementsByClassName('main-frame')[0].innerHTML
pageTitle = 'http://mysite/'+newpath; // new path specifieds the new item.
this.pushToHistory( url, pageTitle, html);
Now the problem I am having is that the result of all of this is that both in Chrome and in Firefox the history is updated in a way that is mostly correct: the url in the history's state object is correct, as is this the content. So that if I click on one of these history events, the correct page is retrieved.
However, the page title, which is shown in the list of history items is incorrect. It is always the title of the page that was loaded when the site was intially loaded. So if I load mysite/a-project, and the title of the page is "My Site - A Project" that is always what appears in the box. I have also checked my code to ensure that the pageTitle object is correct, so dumping pageTitle before calling history.pushState() shows the correct title.
Any ideas?
I discovered the problem. I needed to set document.title first. That meant somewhere before I call history.pushState(), I needed to do this:
document.title = theNewTitle;
In my system I have a main page, that when clicking on any element on that page a new page is opened, in some cases (button click on child page) from the child page will be open a new page, and so on... when I decide to close any child I need to close all levels to the top and refresh the top level page because on the child level I'm doing Database manipulations and I need to see them when I am returning to the main page.
Every thing is working great, the only problem is with the refresh of the first page!
I've tried doing onunload... in the last child...and I've tried JQuery focus for the page itself....
Any one have any idea please?
Some code:
1) this is in the top parent page:
$(document).live(
'focus',
function()
{
window.location.reload(true);
}
);
2) this is in the last child (the one that the top parent page calls):
<body class="RTL" onunload = "opener.close()">
And I've tried many variations of that....
If any one have any idea it will help a lot, because as for now I need to do Setinterval() and refresh the main page all the time and this is really not nice....
Consider using iframes to show the child pages. That way, the child can use window.parent.reload() to reload the page.
If that is not possible: Did you check that opener actually contains the correct window? It might be the second-last child instead.