I am creating a project using angular. In my application i need to print the specific area of page. I know we can achieve this using media css but this is creating problem for me beacuse of lot of print functionalities are in the project. I am trying to below the method
#HostListener('window:keydown.control.p', ['$event'])
showPinned(event: KeyboardEvent) {
event.preventDefault();
var myDiv = document.getElementById("modal").innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML =
"<html><head><title></title></head><body>" +
myDiv + "</body>";
window.print();
document.body.innerHTML = oldPage
}
But when user cancel or confirm then all the events stopped working on application
Well, you replaced the generated html. But all the event handlers are gone. This makes sense for generating a page for print, but not not restore a fully working page. Either you reload the page or you generate the content for print in a different way. For example by creating a separated document instead of manipulating the existing one.
Related
In my js code, on a button click, I want to open the site in new tab and scroll to the selector's location, and highlight it.
Individually, I am able to achieve it, but when I try to peace it together, the selector is not highlighting
Following is the snippet which is to run in websites console
Website :- https://careers.mestel.com/
#go to website
window.open('https://careers.mestel.com/');
#Scroll to the view where selector is present
document.querySelector('ppc-content[key="footer-mestelFooterContent11"]').scrollIntoView();
# Highlight the selector
css_highlight = document.querySelector('ppc-content[key="footer-mestelFooterContent11"]')
css_highlight.style.outline = '#FDFF47 solid 5px'
Only window.open action is getting performed, other actions are not getting perform. Please suggest how to inject remaining js code after window.open. The final expected result will be is as shown in the following image
It is because the code will continue to execute in the window that is currently running (not the new opened one). You can inject new code in a new window in this way (not the only way):
var newWindow = window.open('https://careers.mestel.com/');
var newScript = document.createElement('script');
function injectScript() {
// The code to inject
}
newScript.innerHTML = injectScript.toString() + ';';
newWindow.document.body.appendChild(theScript);
Say I have a simple script
var i = 0;
test();
function test() {
console.log(i++);
setTimeout(test, 1000);
}
I put it in a Google Chrome console. How do I make it continue to run after the page navigates to another (should continue to print out numbers when browsing the web)?
Maybe save the variable 'i' in onbeforeunload() function, and launch a new script with that saved variable?
How do I make it continue to run after the page navigates to another
you can't, the script cannot continue on another page, it's the browser that runs the javascript in the page, and that will stop it when moving to another page.
(or) should continue to print out numbers when browsing the web?
you have yourself answered this. You can certainly save the counter in localstorage and resume counting on the next page, provided this next page contains the same or similar script and the logic to restore the counter from localStorage.
Or, you can move part of this logic to a server-side script.
I suppose this script is an example and displaying numbers is not really what you want to do.
If you are looking for something to run script even when you have left the browser, I suggest you take a look at Service workers.
If you want more resources, you can check Jake Archibald's blog. He is a chrome developer and he is always talking about service workers. An introduction here.
I didn't see any good suggestions posted already for what I was trying to do but I came up with something that worked for me. I wanted to add a navigation element on the page and not have it go away after navigating. This was on a website that was not managed by me. I removed the innerHtml of the body of the page, added an iframe and pointed it at the page I was on, set it to 100% width and height and removed the border. Then I could navigate within the iframe, but still have my script function run in a set timeout to add the navigation element back to the page after it navigated. Something like this:
document.body.innerHTML = ''
iframe = document.createElement('iframe');
iframe.setAttribute('id', 'iframe');
document.body.appendChild(iframe);
iframe.setAttribute('src', window.location.href);
iframe.style.height = "100%";
iframe.style.width = "100%";
iframe.style.border = "0";
function addContent(){
setTimeout(()=>{
elementToAddTo = iframe.contentWindow.document.getElementById('my-element-id')];
contentToAdd = document.createElement('div');
contentToAdd.innerHTML = `<p>My new content</p>`
elementToAddTo.insertBefore(contentToAdd, elementToAddTo.childNodes[0]);
}, 1000);
}
addContent()
Then in that new content somewhere I had an onchange event which would navigate and call the addContent function by saying window.top.addContent();
onchange="window.location.href = window.location.href.replace(/(param1=.*)/, 'param1='+myNewParamValue); window.top.addContent();">
I Understand this approach makes a lot of assumptions about what you're trying to do and maybe it is only working for me because I'm only changing a param value, but I want to leave this hear in case it helps somebody trying to figure out how to do something similar.
I have a two Iframe in my HTML page. I want to use one single jquery file which is loaded on parent page. The code give below is working fine every browser but it has one issue with chrome with ctrl+f5 key. When page is loading first time and when we are pressing ctrl+f5 the it is giving error in chrome otherwise it is working fine. Here is some snapshot. Parent page and iframe are in same domain.
if (typeof(jQuery) == "undefined") {
var iframeBody = document.getElementsByTagName("body")[0];
var jQuery = function (selector) { return parent.jQuery(selector, iframeBody); };
var $ = jQuery;
}
Add the jQuery script in both pages to avoid race condition. When one is loaded, the other will be retrieved from the browser cache.
I am developing a custom plugin for Firefox. For one of the functions in this plugin I have a button which when clicked has to toggle hide/show for another div element. This is achieved by the means of a Javascript function. The function itself is in a file that is packaged in the plugin as well.
Since the div elements are on the browser page I am trying to get the Javascript for this function loaded into the HEAD of the page by using its chrome URL. However, it is not giving the desired result.
Below are snippets of the relevant code:
The actual Javascript that performs the toggle action. The chrome URL for this is: chrome://firefox_extension/content/togglerowz.js If I put this URL in the browser it is able to display the code below.
function toggle(doc) {
var resultBlock = doc.getElementById("RowzFFExtensionDynamicContainer");
var toggleButton = doc.getElementById("RowzFFToggle");
if (resultBlock.style.display == "block") {
resultBlock.style.display = "none";
toggleButton.value = "Maximize";
} else {
resultBlock.style.display = "block";
toggleButton.value = "Minimize";
}
}
Another Javascript that loads this into the browser HEAD. This is triggered by a window load event.
var doc = aEvent.originalTarget;
var togglerowzscript = doc.createElement("script");
togglerowzscript.type = "application/javascript";
togglerowzscript.src = "chrome://firefox_extension/content/togglerowz.js";
var headvar = doc.getElementsByTagName("head")[0];
headvar.appendChild(togglerowzscript);
When the page loads, the following contents are in the HEAD element of the page (as viewed in Firebug):
<script type="application/javascript" src="chrome://firefox_extension/content/togglerowz.js">
Filtered chrome url chrome://firefox_extension/content/togglerowz.js
</script>
When I click the button the error console says toggle is not defined.
Did you whitelist the relevant chrome package as allowing untrusted content to load parts of it? The default setting is to not allow that for various security and privacy reasons. See https://developer.mozilla.org/en/chrome_registration#contentaccessible
I am using JavaScript to make a small iframe application, and I cannot seem to figure out a way to update the URL in my URL bar I made when someone clicks a link inside the iframe.
It needs to be instantaneous, and preferably without checking every millisecond whether or not the value of document.getElementById('idofiframe').src has changed.
I can't seem to find a simple property to tell when the url has changed, so if there is not one, then solving this programmatically will work as well.
Thanks for the help!
This will be difficult to do because it is considered xss and most browsers block that.
There are most likely some workarounds involving AJAX.
First of all, what you want to do will be possible only if the source of your iframe points to the same domain as the parent window. So if you have a page page.html that iframes another page iframed.html, then both of them have to reside on the same domain (e.g. www.example.com/page.html and www.example.com/iframed.html)
If that is the case, you can do the following in the iframed.html page:
<script type="text/javascript">
window.onload = function() {
var links = document.getElementsByTagName('a');
for (var i=0, link; link = links[i]; i++) {
link.onclick = function() {
window.parent.location.href = '#' + encodeURIComponent(this.href);
}
}
}
</script>
This will make it so that whenever you click on a link in iframed.html, the url bar will put the url of the link in the "hash tag" of the url (e.g. www.example.com/page.html#http%3A%2F%2Fwww.example.com%2FanotherPage.html)
Obviously, you would have to have a script like this on every page that is to appear inside the iframe.
Once this is in place, then you can put this snippet inside of page.html, and it will make the iframe automatically load the url in the hash tag:
window.onload = function() {
var url = window.location.hash.substr(1);
if (url) {
document.getElementById('iframe').src = url;
}
}
I unfortunately haven't run this code to test it, but it is pretty straight forward and should explain the idea. Let me know how it goes!
You could add an onload event to the iframe and then monitor that - it'll get thrown whenever the frame finishes loading (though, of course, it could be the same URL again...)
Instead, can you add code to the frame's contents to have it raise an event to the container frame?
In IE, the "OnReadyStateChanged" event might give you what you want.