Hash Symbol refuses to function in IFRAME

The Request.QueryString contains the file path example Temp\file#hashName.jpg

protected void Page_Load(object sender, EventArgs e)
{
string filePath = Request.QueryString["fileName"];
iframes.Attributes.Add("src", filePath);
}

It then goes to the Markup where I have written JavaScript code

function ViewFile(filePath) {
    var width = 800;
    var height = 450;
    var left = (screen.width / 2) - (width / 2);
    var top = (screen.height / 2) - (height / 2);
    window.open('ViewFile.aspx?fileName=' + filePath, 'CustomPopUp', 'width=' + width + ', height=' + height + ',toolbar=no,menubar=no,directories=no,resizable=yes,scrollbars=yes,location=no,top=' + top + ',left=' + left);
    return false;
}

However, when I run it, a new window displays "The resource cannot be found." Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

Requested URL: /Temp/file As soon as it encounters a HASH, it breaks the path... When I used Server.UrlEncode and HttpUtility.UrlEncode(); it's converting / and # to their respective values but showing an error message

HTTP Error 400 - Bad Request.

Javascript Escape(), EncodeURI() and EncodeURIComponent() are also not working out. What should I do to escape the # sign? Does iframe accept # value in URL??? Kindly guide me through this.

Kind Regards, Hardik

Answer №1

How does the ViewFile js function retrieve the input filePath? The problem might be linked to that. If the filePath contains a #, you can use the encodeURIComponent method like this:

'ViewFile.aspx?fileName=' + encodeURIComponent(filePath)

However, there could be an issue if the value of filePath passed to the function is incorrect due to encoding problems elsewhere (e.g. in the IFrame source). When using # in a URL/QueryString, it may lead to problems - so it's advisable to also escape it when assigning it to the IFrame source.

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

Refreshing Templates in Angular with ui.router

Initially, I apologize for the lengthy question, but it is necessary. Regrettably... I have multiple templates and routing logic stored in separate files. Strangely, the template I wish to load (depending on the selected region) does not initially load it ...

Utilize the size of the array as a variable

I have a question regarding the use of the length of an array as an integer value in JavaScript. Here is the code snippet: var counter = 0; var bannerLinks = document.getElementsByClassName("bannerlink"); var linkCount = bannerLinks.length; va ...

Transform intricate attribute of an object into a singular value

Consider a scenario where we have the two classes defined as follows: public class A { public string Name { get; } = "Johny Bravo"; public B ComplexProperty { get; } = new B(); } public class B { public string Prop1 { get; } = "value1"; p ...

Sending numerous HTML forms using a sole submit button through AJAX

On my website, I have a page named publish.php where users can input details for each image they upload. Each image has its own form, but only one form is displayed at a time in a tabbed layout when the user clicks on the corresponding thumbnail. I want to ...

Leverage OpenID Connect in Azure Active Directory with authentication code flow

Currently, I am developing an authentication system for a NodeJS and Express web application that requires users to be directed to Microsoft SSO. To achieve this, I am utilizing passport-azure-ad and OpenID Connect. My main query is - Is it mandatory to ...

Structure of a GraphQL project

What is the most effective way to organize a graphQL project on the server side? Here is my current project structure: src config models setup schema queries index userQuery resolvers index userRes ...

Automatically deliver a message regularly at set intervals on Discord across all groups and guilds

Currently, I am developing an event-bot to use in multiple Discord groups. Here is the code snippet I have been working on: if (command === "init") { message.channel.send("BunnBot starting..."); var interval = setInterval (function () { me ...

Tips for inserting a logo in the center of a QR code using Node.js

I'm currently working on designing a logo and attempting to incorporate it into the center of a QR code. While I've been successful in generating the QR code, I'm facing challenges in getting the logo to appear in the middle. I've tried ...

Connect user input to a predefined value within an object

I am currently working on developing a timesheet application that allows users to input the number of hours they work daily. The user data is stored in an object, and I aim to display each user's hours (duration) in an input field within a table. An i ...

NextJS configuration facing an issue with rewrite rules not functioning as intended

I have attempted to utilize a rewrite rule in the NextJS next.config.js file in order to redirect URLs containing '/lite' to '?amp=1', however, it does not seem to be functioning correctly in all scenarios. Below is the code from my ne ...

Minimizing conditional statements in my JavaScript code

I've just completed the development of a slider and am currently working on optimizing some repetitive if/else statements in the code. The purpose of these conditions is to determine whether the slider has reached the last slide, in which case the nex ...

Retrieve the server code periodically and automatically refresh the form elements

Let's kick things off by explaining how the application functions: (please note there are multiple users on the page such as Patient M, Patient E, and so forth) 1) Check In: Next to Patient X's name, you will find a button labeled Check In. This ...

What is the best way to retrieve the current URL with a hashtag symbol using JavaScript?

I am attempting to display the current URL after the question mark with a hash symbol using PHP, but unfortunately, it is not achievable. Therefore, I need to utilize JavaScript for this task, even though I have limited knowledge of it. This is the specifi ...

In what way does React export a default function that invokes another function within the same file?

Within a JS file in React, I am exporting a default function to App.js. This exported function calls another function that was declared in the same file but was not explicitly exported. How does React know where to find this internal function? Does using e ...

The Facebook JS SDK is causing an XSS error and returning a "user_denied" response, even though the Auth Popup for FB.Login is not being

I currently have a Facebook canvas app located at Previously, I was using an anchor link to direct users to the OAUTH login flow. After implementing the Facebook JavaScript SDK, I followed this logic: 1) Initialization of the FB API FB.init({ a ...

Trigger the Input event on Android with Nuxt

A unique issue has arisen with an input field that filters a list whenever a key is pressed, displaying the filtered results in the browser. While the functionality works perfectly on desktop, it behaves strangely on Android mobiles. The list only shows up ...

Can a props be retrieved and passed as an argument to a function?

My goal is to retrieve a prop from MapsStateToProps using react-redux's connect and then pass it to a child component. This prop serves as an argument for a function, which in turn returns something that becomes the state of the child component. Alth ...

What is the best way to include two class names within a single div using Next.js?

Struggling to include two different CSS classes into a single div element, I encountered some issues. For reference, here is a screenshot: https://i.stack.imgur.com/UuCBV.png https://i.stack.imgur.com/sHNwq.png My code snippet looks like this: blog.js ...

Tips for successfully sending parameters in a Google Geocoding request

Dealing with an array of objects containing addresses, each with four fields. The first field is the current location (store), while the others provide address information. The challenge is ensuring that I end up with a result in the format key:value (sto ...

Create an Android application using Node.js

While developing my mobile application, I am utilizing html5 with node.js to create a chat box for users connected on the same wireless network. However, I encounter an issue when coding on my desktop using node.js software. How can I overcome this challen ...