This error message indicates that the function window.parent.sayhello is not available or defined

I have a JavaScript function that is defined in a JScript.js file, which is located on the masterpage. My goal is to call the sayhello function from this file on the inIframe.aspx page. The inIframe.aspx page is nested within the webform1.aspx page, and the webform1.aspx page is associated with a masterpage called masterWithJs.master.

When I visit :

http://localhost:8022/inIframe.aspx

I encounter a script error in firebug:

window.parent.sayhello is not a function

Masterpage:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="masterWithJs.master.cs"
    Inherits="IFrameJS.masterWithJs" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
        <script src="Scripts/JScript1.js" type="text/javascript"></script>
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Webform1.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/masterWithJs.Master" AutoEventWireup="true"
    CodeBehind="WebForm1.aspx.cs" Inherits="IFrameJS.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <iframe id="myIframe" runat="server"></iframe>
</asp:Content>

inIframe.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="inIframe.aspx.cs" Inherits="IFrameJS.inIframe" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        this is the iframe page
    </div>
    </form>
    <script type="text/javascript">
        window.parent.sayhello();
    </script>
</body>
</html>

JScript1.js

function sayhello() {
    alert( 'hello');
}

Webform1.aspx behind code:

 public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            myIframe.Attributes.Add("src","inIframe.aspx");
        }
    }

Answer №1

Eliminate the vacant Content control that has ContentPlaceHolderID="head" from the webform1.aspx page.

Having the Content control on the page will override the content in the ContentPlaceHolder in the master page, thus causing the exclusion of the Javascript file.

Answer №2

It seems to me that I have a solution in mind

Consider creating a utility function for the file path of the script that contains the function you are calling, similar to this example

   public static string ReferenceScript(string scriptFile)
    {
        //this line is just an example "~/include/js/" of the path of the js file
        var filePath = VirtualPathUtility.ToAbsolute("~/include/js/" + scriptFile);
        return "<script type=\"text/javascript\" src=\"" + filePath + "\"></script>";
    }

Then, include this function in the master page HTML at the beginning of the body section

//EtPortalEntities.um_utility is an instanse of my name space you should put yours
<%= EtPortalEntities.um_utility.ReferenceScript("jquery.js")%>

Give it a try and see if it resolves the issue regarding paths.

Best regards

Answer №3

In order to fix the issue with the "head" ContentPlaceholderID on the webform1.aspx page, you must delete the Content tag associated with it.

Answer №4

Perhaps you're searching for...

Call the function sayhello() from the window opener.

Answer №5

There is no need for the window.parent reference:

Simply invoke the function in your inIframe.aspx file like this:

<script type="text/javascript>
    sayhello();
</script>

The JavaScript compiler will locate the 'sayHello' function among all the script files and sections it has accessed.

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 method for modifying the chosen color using a select option tag instead of a list?

element, I have a Vue component that features images which change color upon clicking a list item associated with that color. <div class="product__machine-info__colors"> <ul> <li v-for="(color, index) in machine.content[0] ...

Arrange a div element within another div by utilizing the fixed positioning property, while also accounting for any potential "white space

Can someone help me figure this out: I currently have this much progress: http://jsbin.com/apikiw/3/edit#preview The issue I'm facing is that I am unable to insert it between the <p /> tags due to its dynamic nature... any solutions or suggest ...

Using JavaScript to parse JSON data generated by PHP using an echo statement may result in an error, while

I am facing an issue with parsing a JSON string retrieved from PHP when the page loads. It's strange that if I send an AJAX request to the same function, the parsing is successful without any errors. The problem arises when I attempt to do this: JSON ...

Optimizing internal website search by indexing static pages

Looking to include static page content in Azure Search alongside dynamic content, but unsure of the best approach. Rather not store all static content in database. Considering pulling text into resource files and having index function retrieve from there ...

Is it possible for a cloud function to safely carry out asynchronous tasks after it has fulfilled its promise?

Is it safe for a cloud function to execute async tasks after returning its promise? Take into consideration the following code pattern: exports.deleteUser = functions.auth.user().onDelete(async (user) => { const uid = user.uid; asyncTask1(uid); ...

Automate the process of saving information to Google Sheets using Google AppScript

I have a Sheet named 'Automatic' where I've imported a set of data using IMPORTXML. My goal is to update this data list daily at the same time to create a database with various stock quotes over time. Is there a way to accomplish this usin ...

Modify the database once authorized by the administrator

`I have a webpage that showcases testimonials. I am looking to only display the testimonials with a "status" of "1" in my database. How can I quickly update the "status" column from "0" to "1" right after the admin clicks on update? I am also incorporati ...

Change prompt-sync from require to import syntax

In my Node project, I have integrated the prompt-sync module. const prompt = require('prompt-sync')(); const result = prompt(message); To maintain consistency in my TypeScript code, I decided to switch from using require to import. In order to ...

Cutting-edge framework for Single Page Applications

Can you assist me in identifying the most recent framework suitable for creating single page applications? Your help is greatly appreciated. Thank you. ...

Is it possible in ASP.NET Core to selectively compile code at runtime?

I am currently working on developing an asp.net core application that generates random matrices. One issue I am encountering is the need to potentially modify the matrix creation logic during runtime. I am curious if there is a way to separate the matrix ...

Generate a dropdown menu with dynamic options populated from an API by adding an input type select element dynamically

Greetings! I am working on designing a decision tree that dynamically generates options based on user selections and API responses. When a user chooses a reason option, the corresponding reasons are fetched from the API and displayed in a select dropdown. ...

Using JavaScript, generate an array of objects that contain unique values by incrementing each value by 1

I have an array of objects called arrlist and a parameter uid If the property value has duplicate values (ignoring null) and the id is not the same as the uid, then autoincrement the value until there are no more duplicate values. How can I achieve the a ...

Code for a regular expression that permits either letters or numbers with symbols

Here is the code snippet I am using for data validation in jQuery: return /^(?=.*[A-Za-z0-9/\$#.-_])[A-Za-z0-9/\$#.-_]$/i.test(value) The requirement is that the value should begin with letters or numbers, or a combination of both. Afterwards, ...

Getting the number of ticks from an rxjs Observable is a simple process that involves extracting

Is there a way to track how many times this observable has run? this.clock = Observable.interval(1000).map(function(value){ if(value == 0){ return value * 100 / 60; } return value * 100 / 60; }).take(61); I would like to kno ...

Using accentuated characters in MAC OS with Firefox and Chrome

My issue is as follows: I am using this tag to upload a file <div id="form-attachments"> <input type="file" name="attachFile" id="attachFile"/> </div> and retrieving the value like this $(" ...

Learn how to efficiently execute a function multiple times using pure JavaScript

I am trying to create a tabbed content functionality with multiple elements. How can I utilize the same function for various elements declared in a variable? For example, I want to clone the parent div.tabs element with similar content but different ids an ...

I'm having trouble with accessing an object by index in a knockout observablearray. It seems like the binding process is encountering difficulties

I'm completely new to stackoverflow and knockout, and I have a query. I want to access a JSON object by index. It works fine when I insert dummy data in my code, but it throws an error when I try to add data from JSON. Error Uncaught TypeError: Unab ...

How can I enable a button in a React application when the text input is not populating

For my Instagram MERN project, I have implemented a Comment box feature for users. The Post button starts off disabled and becomes enabled when text is entered. However, despite entering text, the button remains disabled, preventing submission. Below is th ...

The function _path2.default.basename does not work when using convertapi within an Angular framework

I'm currently working on integrating the convertapi into my Angular 11 application by referencing the following documentation https://www.npmjs.com/package/convertapi My goal is to convert PDFs into images, However, I encountered an issue when tryi ...

Replacing jQuery.ajax from a different directory/domain - problem with using relative URLs

We are incorporating scripts from various sources and domains, including one that contains the definition for jQuery.ajax function. Calls to jQuery.ajax are being made from different places and domains using relative URLs, such as jQuery.ajax("my/relativ ...