What are the steps to verify if an iframe is lacking content?

I have two different codes: one is null and the other is not null.

Code with null value (== empty):

<div class="col-xs-6">
    <iframe style="width:868px; height:550px;" id="FileReload" src="/Account/GetPDF?NUM=101">
        <html>
            <head></head>
            <body>
                <pre style="word-wrap: break-word; white-space: pre-wrap;"></pre>
            </body>
        </html>
    </iframe>
</div>

Code when not null (!= empty):

<div class="col-xs-6">
    <iframe style="width:868px; height:550px;" id="FileReload" src="/Account/GetPDF?NUM=101">
        <html>
            <body style="background-color: rgb(38,38,38); height: 100%; width: 100%; overflow: hidden; margin: 0">
            <embed width="100%" height="100%" name="plugin" id="plugin" src="http://localhost:49943/Account/GetPDF?NUM=101" type="application/pdf" internalinstanceid="74" title="">
            </body>
        </html>
    </iframe>
</div>

Controller code:

public ActionResult GetPDF(int NUM)
{
    //.Select Database
    //.
    //.
    if (reader.HasRows)
    {
        //Check if it passes a null or not-null value
        PDF = ((byte[])reader["File"]);
        return new FileContentResult(PDF, "application/pdf");
    }
}

When it is null, the iframe displays as white. If it is not null, it works fine. (I want to hide the iframe when the layout is white.)

Here is how it looks when the iframe is white:

https://i.stack.imgur.com/6TYhq.jpg

If the value is null, display a white iframe with specified width and height.(if == null -> hide the iframe)

How can I check if a value is null using JavaScript?

Answer №1

Success! I've cracked the code!

$(function() {
  $('#FileReload').load(function() {            
    if ($.trim($(this).contents().find("body").find('embed').length) == 0) {
      $(this).hide();
    }
  });
});

Even though it employs jQuery, there's no need to fret

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

The scale configuration for scale: x is not valid for creating a time scale chart using chart.js

I am currently utilizing VueJS and attempting to integrate a time scale chart using Chart.js. However, I encountered the following error: Invalid scale configuration for scale: x Below is my configuration : First, I have a component named Chart.vue with ...

What is the best way to manage the cumulative index within two nested ng-repeats?

Within the scope of a directive, I am working with two ng-repeats. This directive is responsible for generating a table, and each table cell's data comes from a separate data source. This data source requires the cumulative index of the two repeaters. ...

Guide on incorporating HTML page into MVC 5 using AngularJS routing

I am trying to incorporate the SPA concept of AngularJS into MVC 5, but I am struggling with routing. My goal is to have my main page displayed using Razor and load specific sections of the page using AngularJS. I understand that my explanation may not b ...

Adjusting a parameter according to the width of the browser window?

Using Masonry, I have implemented code that adjusts the columnWidth to 320 when the screen or browser window width is less than 1035px. When the width exceeds 1035px, the columnWidth should be 240. However, the current code keeps the columnWidth at 320 re ...

Setting the Content-Type of a JavaScript file within a NodeJS application

I am facing an issue with opening a js-file on my NodeJS server, as it always specifies the .js file with a Content-Type of "text/html." My objective is to send user-input from an html form to a JavaScript file for performing calculations and later genera ...

The requested resource lacks the 'Access-Control-Allow-Origin' header in a basic HTML form

Can someone help me understand why I keep encountering this error in my basic HTML form? I am attempting to display XML data on my website to showcase news stories, but unfortunately, I keep getting stuck with this persistent error. Any assistance would ...

The Bootstrap modal-backdrop dilemma requiring JavaScript intervention

I am encountering some problems with the Bootstrap modal. When I try to open a modal, everything looks good, but when I close it, the screen turns completely black. Upon closer inspection, I found that every time I click on the X to close the modal, there ...

Can you explain the role of [Yield, Await, In, Return] in EcmaScript syntax?

EcmaScript production rules often include the use of "modifiers" such as: [Yield, Await, In, Return] Here are a couple of examples: ArrayLiteral[Yield, Await]: ... ElementList[Yield, Await]: ... AssignmentExpression[+In, ?Yield, ?Await] I have look ...

Combining multiple JSON objects into a single array in AngularJS

Currently, I am facing a challenge in merging two API calls. The first call involves fetching data by filtering the account_id on the backend, while the second call retrieves data based on the test_id. Let's start with the JSON response for /api/test ...

Display the Material UI Switch in an active state even when the "checked" value is set to false

While using Material UI Switches with Formik, I've encountered an issue. When I toggle the switch to 'enable,' it automatically sets the value in Formik to "true," and when I toggle it to 'disable,' it sets the value in Formik to " ...

When utilizing a JQuery plugin for sliders, Dart does not function in the same way that traditional JavaScript does

Starting out with Dart for Front-End development has been a bit challenging for me. I am trying to incorporate a JQuery plugin called FlexSlider using the Js-Interop Dart Library. However, it's not functioning as expected compared to pure JavaScript, ...

Unfortunately, the header and footer are not lining up correctly with the main body on our mobile site

I've been tasked with creating a fully responsive website, but I'm encountering difficulties with the mobile design. Specifically, when I switch to mobile dimensions like an iPhone 12, the header and footer don't line up properly with the ma ...

Utilize a MongoDB query to locate a single document and include a conditional statement within the update operation

I've been struggling with this problem for quite some time now and I could really use some guidance from experts here on SO. Essentially, what I am trying to achieve is to locate a specific document using a provided _id, and then execute a conditional ...

AngularJS: Handling multiple asynchronous calls simultaneously in a function

In my AngularJS function, I need to make two asynchronous calls that are independent of each other. However, the function should only return when both calls have completed and the results are stored in the return variable. I have tried various solutions a ...

Function that activates traffic lights

Currently, I'm encountering errors while working on this project in Notepad. Can you help me figure out what's wrong with my code? I'm attempting to create an onload traffic light using an object array. The requirement is to implement this f ...

Background image loading gets delayed causing it to flicker

Instead of having separate files for different elements on my site, I decided to keep all the JavaScript in one large file called my_scripts.js. To speed up loading times, I defer the loading of this file using inline JavaScript and make sure it is the las ...

AngularJS and TypeScript encountered an error when trying to create a module because of a service issue

I offer a service: module app { export interface IOtherService { doAnotherThing(): string; } export class OtherService implements IOtherService { doAnotherThing() { return "hello."; }; } angular.mo ...

Managing state changes in React can be a complex task, but

As a newcomer to React, I am currently working on creating an icon menu. However, I am facing an issue with my handleChange function not functioning as expected. While the icon Menu and possibleValues menu are visible, I am unable to select any of the op ...

Running the command npm show --outdated triggers an E404 error stating that the package is not found in this registry

I am currently working on a confidential project that I prefer not to make public. Despite using node v17.3.0 and npm 8.3.0, I am facing difficulties in displaying the outdated dependencies: $ npm show --outdated npm ERR! code E404 npm ERR! 404 Not Found - ...

External function does not support jQuery types

In my theme.js file, I currently have the following code: jQuery(function ($) { accordion($) }) const accordion = ($) => ... By placing the accordion function directly into the jQuery function, Typescript is able to assist with the installed jquery ...