Ensure that a new window is opened while maintaining the exact location of the parent window

Having an issue with printing a calendar. The problem arises when trying to load CSS with absolute paths like /path/to/css.css. Opening a window with:

var win = open('', '_blank')
win.document.write(htmlContent)

will display the HTML correctly but won't load the CSS due to incorrect hostname links.

Using a redirect after changing the location isn't a viable solution.

I've managed to achieve the desired outcome with the following function:

function open_calendar(content) {
  var win = open(window.location, 'Calendar')        

  win.addEventListener('load', function () {
    win.document.write(content)
  })

  return win
}

This function opens the window at the same location, then changes the content as needed. However, this method may take some time to load. Is there a cleaner way to achieve the same result?

Answer №1

Include a <base> tag in your html code before proceeding with your writing. Specify the base url that you want the relative urls to reference.

<base href="http://example.com/another/path">

The <base> element informs the browser which base url to use for relative links. For instance, if you establish the base as http://example.com/base and encounter a relative link like /path/to/js.js, the resulting url utilized would be

http://example.com/base/path/to/js.js

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to set the theme for Material-UI in a React application?

I find myself puzzled when it comes to styling a front-end based on Material-UI. Can someone clarify where the theme originates from in the following example code and what impact the theme has? import React from "react"; import Container from "@material- ...

Generating a JavaScript object based on an array of keys

I'm currently grappling with a task that is proving to be quite challenging. I have a set of arrays structured like this: ['key1', 'key2', 'key3'] ['key1', 'key2', 'key4'] ['key1', ...

Sort various divs using a list

I have multiple divs containing different content. On the left side, there is a list of various categories. When a category is clicked, I want to display the corresponding div for that category. Initially, I want the main category to be loaded, with no opt ...

Managing an Angular timer: Starting and resetting it via the controller

Is there a way to start a timer when the user clicks on the recordLogs method and reset the timer when the user clicks on the stopLogs method? According to the angular-timer documentation, we should be able to use the timer-stop and timer-clear methods to ...

Log in using your Google credentials within an AngularJS application

I recently went through a tutorial on integrating Google sign-in with my AngularJS app. Following the tutorial instructions, I added the Google button in the following manner: First, I included the meta tag in the head section: <meta name="google-sign ...

If the user is found in the database, show all form fields; otherwise, display them as read-only

My HTML form contains two buttons: "Search" and "Update". When the "Search" button is clicked, the code below retrieves values from a MySQL database. The retrieved value for "age" can then be inserted into the database using the "Update" button. The HTML ...

Generate dynamic DIV elements and populate them with content

Can you assist me in getting this code to function properly? My goal is to dynamically create elements inside a div and fill each element with a value fetched from the database through a server-side function. I'm unsure if there's a better approa ...

Troubles encountered when cascading val(), text(), and data()

Here is my JavaScript/jQuery code: $select.append($("<option />") .val(this.id) .text(this.text) .data('name', this.name) .data('isstorage', this.isstorage)); Although it successfully assigns values to t ...

Tips for executing specific javascript on small screens or mobile devices

I am currently in the process of developing a Vue web application that needs to be functional on all devices. I have certain code that should only run on small screens or mobile devices. Right now, I am using an if statement with $(window).width() to achie ...

Enabling Event bus suggestions for Typescript: A step-by-step guide

Hello, I've encountered an issue while attempting to add types for the TinyEmitter library. Specifically, I need to define two methods. First: addEventListener(e: string, (...args: any[]) => void): void; Second: emit(e: string, ...args: any[]): vo ...

Tips for inserting a php variable into an html document

I am trying to figure out how to export a variable from a php file into an html file. The php file I'm working with is example.php and it contains the following code: <?php $array= ['one','two']; ?> The html file is named ...

What is causing my Li elements to be unchecked in REACT?

Why is the 'checked' value not changing in my list? I'm currently working on a toDo app Here are my State Values: const [newItem, setNewItem] = useState(""); const [toDos, setToDos] = useState([]); This is my function: funct ...

Addressing rendering problems in Ag-GRID when used with Angular

I'm facing a perplexing issue where the ag-grid table in my Angular 12 / Bootstrap 5 application renders with a height of 0px. Below is the link to the rendered table: rendered table Upon inspecting with Chrome's debug tool, I noticed that the ...

Securely encoding information with PHP and decrypting it using JavaScript

I'm currently working with 2 servers. My goal is to generate a pair of keys, store the private key in local storage, and send the public key to my PHP server. The main objective is to encrypt data using the public key in PHP and decrypt it using Jav ...

Set a variable to contain a specific scope in JavaScript

I'm struggling to pass user input from a text box stored in $scope to a firebase query. Here's the code I have so far: $scope.array = []; $scope.addListItem = function(quote){ $scope.array.unshift(quote); console.log(quote) this.customQuote = ...

Can you place 4 table cells in the first row and 3 table cells in the second row?

Exploring the world of HTML and CSS designs for the first time. Here's a code snippet I've been working on: <html> <body> <table width="100%"> <tr> <td width="25%">&#160;</td> ...

Capture a screenshot of an element in either jpg or png format and proceed to save it to your device using Javascript

I am looking to create a JavaScript function that can capture a screenshot of an element and then allow the user to download it. <body> <h1>Sample text</h1> <h2>Sample text</h2> <table width="1080px" height=" ...

Utilizing JavaScript as an alternative to PHP in this specific scenario

Hey everyone, I'm looking to pass data from PHP to JavaScript. Below is my PHP code that I need to adapt for use in JavaScript: $result = dbMySql::Exec('SELECT Latitude,Longitude FROM data'); while ($row = mysqli_fetch_assoc($result)) $ ...

Styling does not affect an Angular component that is injected into an iframe

I am facing an issue with styling in an iframe when trying to append my own angular component. Despite various attempts, I have been unsuccessful in getting the styling to apply to the component within the iframe. Upon loading the iframe, I use JavaScript ...

Error in jQuery sortable function occurs when dragging multiple elements

When using the sortable() function on multiple lists, I encountered a persistent bug. To drag more than one item, I added the following code to the start function: e.item.siblings(".selected").appendTo(e.item); However, a new issue arose where the plac ...