I need to open a specific view of a website. In fact the webpage is only one page and the links on the page execute javascript functions to change the visible content. My question is:
How can I create a link to this webpage that tells the page which javascript function to be executed in order for it to show the desired page view?
If you're targeting modern browsers, you may use postMessage to send messages between windows.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
You could be listening for messages on your main window while your popup send them.
Related
This question already has an answer here:
What is the difference between a background page/script and a popup page?
(1 answer)
Closed 17 hours ago.
Basically we can do everything via background script that can be done using pop up script so why do we need to have multiple scripts?
I am just exploring around extensions
Background scripts run all the time, while popup scripts are started when the popup opens and stopped when it closes. So whatever you do in a popup script needs user interaction.
A pop-up script and a background script are two types of scripts used in web development for different purposes.
A pop-up script, also known as a modal script, is a JavaScript code that displays a pop-up window on top of the current web page. This type of script is often used to show alerts, confirmations, or to collect user input. When a pop-up script is executed, it interrupts the user's current interaction with the web page and requires them to interact with the pop-up before they can continue. Pop-up scripts are typically triggered by user actions such as clicking a button, link or an image.
On the other hand, a background script is a script that runs in the background of a web page without any visible user interface. It is typically used to perform tasks that do not require user interaction or to provide additional functionality to a web page. A background script can run continuously or be triggered by specific events such as page load or user input. Some examples of tasks that can be performed by background scripts include data processing, network requests, and DOM manipulation.
The main difference between a pop-up script and a background script is that a pop-up script displays a pop-up window that requires user interaction while a background script runs in the background without any visible user interface.
Basically we can do everything via background script that can be done
using pop up script
Firstly, there are no longer background pages in manifest V3. You have a service worker instead.
Secondly, there are things such as playing audio which cannot be done from a service worker. This is why chrome.offscreen has been introduced.
I am trying to create a bookmarklet that follows this process:
From any page, click the bookmarklet
load a specific page.
Trigger an input button which causes page to reload
Once reloaded; open a new page; in this case a social media page.
This is what I've written so far:
if (!($ = window.jQuery)) {
// Inject jQuery to make life easier
script = document.createElement( 'script' );
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
script.onload=SocialCredentials;
document.body.appendChild(script);
}
else {
SocialCredentials();
}
function SocialCredentials(){
$('input:submit').trigger('click');
window.open('http://www.facebook.com', '_blank');
}
The button submit click causes the page to process and clear the credentials of the user so they can visit social sites.
The above code works, but I want to make sure the page finishes loading before opening a new social media page.
Do I need to add some kind of wait() function? If I do add a wait method, will it kill the JavaScript and not open the new window? I'm fairly new to JavaScript, so I'm not familiar with these types of mechanics.
Edit:I should note that I don't have access or control to the page this bookmarklet will work on so I can't alter it's flow. What I'm trying to do is more of a favor for another department as a quick fix until they can make changes on their end.
Edit2: Updated the process.
If a page reloads, any code currently running on that page, including code from a bookmarklet, is ended and removed. Traditionally bookmarklet code ceases to work after a page load and user clicks it again.
There are three workarounds that I know of.
A.) Change the process that loads the page to instead use AJAX.
B.) Change the process that loads the page to instead open a new window, and then use JavaScript to manipulate the new window.
C.) Before triggering the page load, open a new child window and insert code into it. The code in that child window can then monitor its parent and take actions on the parent even after the parent has reloaded.
Hard to come up with a title, my apologizes.
Problem is this: Since modern web-browsers disable pop-up windows I am in need of a work-around.
When a visitor comes to the website they are prompt to press a button. Once the button is pressed a pop-up window is launched with the following code:
w = window.open('/audio/audioplayer.php?id='+audioId, 'audioplayer', params);
Now that the pop-up is open I would like when the visitor views other pages the pop-up is loaded with specific information based on whatever page they are on.
I am not sure if this is possible or how I can do this (check if the pop-up window is open, and if it is load the information, and if its not re-display the button)
I don't think it is possible to detect where the popup is open of not.
Have you thought about using a dialog? Rather than a popup?
window.open returns a windowObjectReference - this is the only way you can talk to the popup window. In particular, you can tell if that window is closed with the windowObjectReference.closed attribute. And the popup window has a window.opener attribute that references the parent window back. You can use both to communicate.
However, it seems you want to keep this communication between page loads. You have a few options:
Try to keep the link between windows as long as possible. The problem is that when the parent window reloads, all the javascript variables reset and there's no way to recover the reference to the popup - unless the popup sets it using window.opener. This link shows this approach and also another one with frames.You could consider it either ugly or clever. But it's not perfect. (You can't do anything if the user opens a page in a new link)
Communicate with the server using ajax from both main pages and the popup page. When a top level page wants to send a message to the popup, they start an XMLHttpRequest to your server which notifies a script which leaves a message in a "queue". The popup page regularly polls/long-polls the server with XHR too (or server sent events, my personal favorite) and updates its own contents accordingly.This might be a bit more complex/expensive than you'd like but it's also the safest solution.
Don't use popups, like the other answer suggested. A div with position: fixed could get you a similar result, and might save you from that method of communication between windows, however it also leads to having one dialog per page, so you need to ask the server if another instance of the dialog is running. Not quite sure if other methods of sync are viable for this (localstorage?)
I have a popup window, and from there, I want the parent window to reload, but a specific frame not the entire page.
So a user clicks a button from within a frame, it opens the popup. Now from the popup, based on a specific event, I want to reload a frame from the parent window.
Is this possible in IE?
I have a page index.php that has 2 iframes in it.
From the 2nd iframe a new popup window opens.
When the user clicks on a button or closes the popup window, I want to reload iframe#2 (the one that opened the window).
How can I do this?
I have tried:
opener.location.reload();
opener.top.document.getElementById('myIFrameId').location.reload()
opener.myIFrameId.location.reload();
Nothing seems to work.
I found a great jQuery plugin that works in all modern browsers, including IE8.
It allows you to easily call up a secondary browser window with parameters and then your allowed to pass data between the two, similar to how postMessage API works.
These data messages in turn can load new content or alternate webpage into the original iframe2 that's on your parent page once you analyze the incoming jQuery data.
Article: jQuery plugin for communication between browser windows
Online Demo: Parent Page
Download Project: windowmsg.zip
The downloaded files will work directly from your desktop, unlike jsFiddle since it's not permitted there.
Yet another solution that works great when you don't need a secondary browser window and the use of a floating iframe is acceptable, just use a lightbox clone that's iframe capable, such as Shadowbox-js.
The benefit of this method is that your in complete control of how the iframe closes, unlike the above secondary browser window that has it's own browser close button which may not trigger your desired events.
The callback during the lightbox clone closure event can take care of changing the contents in the parent pages iframe 2 as needed. Also, you can choose to have the lightbox bound within the iframe 2 (lightbox clone installed in iframe page), or have it fullscreen (lightbox clone installed in parent page).
In your case, window.opener is the window object of the iframe that opened the popup, so opener.location.reload() should work: Demo
Demo sources:
Main page: http://jsfiddle.net/jefferyto/DWeYZ/
Iframe: http://jsfiddle.net/jefferyto/WWbg9/
Popup: http://jsfiddle.net/jefferyto/TKQUJ/
I kind of rebuilt this functionality here:
http://jsfiddle.net/JBWTn/3/
Clicking the button in the popup will change the border look of a frame in the original window . The key here is navigating through the original window's frames using
window.opener.document.getElementById('[ID_OF_YOUR_FRAME]')
(quite similar to what Frank van Puffelen suggested)
To reload the frame instead of just changing its style, use
window.opener.document.getElementById('[ID_OF_YOUR_FRAME]').location.reload()
...like you tried in your question already.
This question reminded me of the functionality in phpMyAdmin (where you can run SQL queries from a popup window and have the results shown in the main window), so I had a quick look ;)
Have you tried:
opener.frames["myIFrameId"].location.reload();
it will show error "Error: Permission denied to access property 'reload'"
that's possibly "the same origin policy" problem.
or you create a div wrapper over the iframe and re generate iframe again
Hi I would like to open a page and then run some javascript functions. My problem is that once I open the window it stops running the code:
javascript:
location=("http://www.myTestPage.com/");
showForm();
document.getElementById("txtEmail").value="test#hotmail.com";
submit();
You can't. The problem is that each page is loaded into its own logical window (even if that window occupies the same client area in the browser as the previous page). Each window runs script in its own context. Usually when windows are replaced any running script is terminated and even if it weren't I suspect you want the code following the location assignment to operate on the new content.
You would need the target page to run your code for you. If the page is generated dyanmically by something like PHP or ASP then you could use the query string to specify a file that the page should point the SRC of a script block it puts at the bottom of the body content.
It's because your javascript functions are declared in the window object. By calling location= you destroy the current window object and all the function in it. After all you cant declare function in one window to run in the same same window but with another location. All you can do is toopen a new window.
It is because the page has transferred to a new location. Execute your javascript first before you move to another location.
location=("http://www.myTestPage.com/") starts the navigation to the new page. Where do you intent for showForm() to be called from? If it's the current page, I don't get why you want to do that?
This will following though I doubt you want to open a new window, yea?
window.open("http://www.myTestPage.com/");
showForm();
document.getElementById("txtEmail").value="test#hotmail.com";
submit();
To Add:
I think you wanted to submit the form to for server-side process and also navigate to the new location at the same time. Few ways to do it:
Submit the form, and let the response redirect to the desired location
Submit the form asyncronously, after that navigate to new page
This is only possible in JavaScript if you open the second page in a new window and that page is hosted on the same domain (since JavaScript has a same-domain security policy); otherwise, you'll have to do as some others have suggested and have the target page handle it itself.