Finding the iframe document on Chrome

I've been attempting to dynamically adjust the height of an iframe based on its content, but I'm facing issues in the latest version of Chrome.

In Chrome, 'doc is undefined' error is showing up.

Surprisingly, everything works perfectly fine in Firefox.

I'm not sure what I'm doing wrong here. Can anyone help me figure this out?

<script>
    $(function() {

        $('#iframeid')
                .load(
                        function() {

                            try {
                                var doc = this.contentDocument ? this.contentDocument
                                        : this.contentWindow.document;
                                alert(doc);
                            } catch (e) {
                                alert(e.message);
                            }
                        });

    });
</script>
<iframe frameborder="0" id="iframeid" src="iframesource2.html"
    height="1px"> </iframe>
javascriptgoogle-chrome

Answer №1

It appears to be effective in my case as well. Take a look at this code example.

I made some minor adjustments that should not have any significant impact:

$(function () {
    $('#iframeid').load(function () {
        try {
            var doc = this.contentDocument || this.contentWindow.document;
            alert(doc);
        } catch (e) {
            alert(e.message);
        }
    });
});

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 Simple HTML Dom parser is failing to parse contents on these specific websites

I tried using a basic HTML DOM parser but it's encountering issues when parsing certain websites. include_once 'simple_html_dom.php'; $html=file_get_html('http://www.lapenderiedechloe.com/'); This results in an error message like ...

javascriptphpjqueryhtml

The JavaScript popup is not functioning properly when using a comparison operator

There are 5 links with mini preview photos and URLs. Out of the 3 links, two are considered good while the other two are not. Clicking on a good link takes me to a new page, but clicking on an error link changes the href attribute to addressError, triggeri ...

javascriptjquery

Is there a way to construct a Javascript function, without relying on JQuery, for fetching JSON objects from varying

I have been searching for a non-JQuery AJAX function that can fetch data from a URL and return it as a JSON object. For example, let's say I want to display information about Users from one JSON located at URL1 and also include information about Post ...

javascriptjsonajax

Is it possible to incorporate custom meta tags into next.js 13 using static metadata objects?

I'm trying to block Pinterest on my website by adding the meta tag <meta name="pinterest" content="nopin" /> in the site's header, but I'm uncertain how to do this in Next 13 using the new exported metadata object f ...

javascriptnext.jsmetadatanext.js13

Changing the map behavior when it is moved in Leaflet

I am currently using Leaflet to design a map that includes a personalized sound layer. Each tile on the map features an <audio> element, and I am exploring methods to adjust the audio playback as the user navigates around the map (specifically by mod ...

javascriptleaflet

Exploring the process of setting up a datasource for Select2 in October CMS using the integrated Ajax Framework

Looking to utilize the extensive AJAX framework provided by October CMS to populate a Select2 box with data. The process of using a remote dataset in Select2 involves the following steps: $(".js-data-example-ajax").select2({ ajax: { url: "https://a ...

javascriptphpajaxjquery-select2octobercms

What is the best method for sending a document to a web API using Ajax, without relying on HTML user controls or forms?

I have successfully utilized the FormData api to upload documents asynchronously to a web api whenever there is a UI present for file uploading. However, I now face a situation where I need to upload a document based on a file path without relying on user ...

javascriptajaxasp.net-mvchtmlasp.net-web-api2

What steps can I take to enable ads in Chrome within my automation script?

Looking to implement a Google login scenario, Begin by opening the website and clicking on the "Login with Google" option A Google popup will appear prompting you to enter your email, password, and then click on login Expected outcome: Successfully loggi ...

javaseleniumgoogle-chromeautomationads

Incorporate JSON information into HTML dropdown menu using Google API

I'm finding it difficult with this task. Below is a list that needs the name and address inserted into the dropdown menu from the JSON file. <div class="dropdown-list"> <div class="list-container"> <ul class="list" ...

javascriptjsongoogle-maps-api-3

Strategies for Dealing with 'No Search Results' in Your Search Functionality

I am currently facing an issue with displaying "No Results Found" when a user utilizes my search feature. The current problem is that "No Results Found" appears immediately on the screen and then disappears while a search query is being processed, only to ...

javascriptangulartypescript

What is the purpose of specifying http://localhost:3000 when accessing API routes in Next.js?

I created an API route within the pages directory of my NextJS project. It is functioning properly as I am able to retrieve data by directly accessing the URL like http://localhost:3000/api/tv/popular. My goal is to fetch this data using getStaticProps and ...

javascriptreactjsnext.js

Unable to invoke parent method from child component in Vue causing issue

I am facing an issue where I am trying to trigger a method in the parent component from the child component using $emit, but for some reason, it is not working as expected. Can someone please help me troubleshoot this problem? Parent Component <templat ...

javascriptvue.jsparent-child

Embedded tweets may occasionally lose their borders when viewed on various web browsers

My goal is to showcase a collection of responsive embedded tweets in rows of 2. Here are the key elements of the code that have enabled me to achieve this: HTML <div id="tweets"></div> <script src="https://platform.twitter.com/widgets.js" ...

javascripthtmlcsstwitter

What is the best way to exhibit information from a lone table column in a modal using Angular 7?

Is there a way to have an "edit" button beside each row in the appointments table that triggers a modal popup allowing users to change appointment dates? Unfortunately, I'm facing an issue where the modal does not pop up and my screen turns white. ** ...

javascriptnode.jsangulartypescriptangular-material

I'm facing some uncertainties with a couple of AngularJS code snippets

At my workplace, I am tasked with making modifications to an angularjs project. However, I find the code quite complex and challenging to fully comprehend: app.controller("complementsController", function($scope, $rootScope, $mdSidenav, $timeout, $localSt ...

javascriptangularjs

Click anywhere outside the sidemenu to close it

I want the menu to behave like the side menu on Medium. When the side menu is open and the user clicks outside of #sidebar-wrapper, the side menu should close. Currently, I have to click the toggle X to close the menu. html <a id="menu-toggle" href="# ...

javascriptjqueryhtmlcssmenu

Javascript - Unable to update button text

I am encountering a problem with updating the text of a Bootstrap button when a collapsed element is opened or closed. The icon part is updating successfully, but I am struggling to get the button text to update and I cannot figure out why. My knowledge o ...

javascriptjquery

Placing options and a clickable element within a collapsible navigation bar

Within my angular project, there are 4 input fields where users need to enter information, along with a button labeled Set All which will populate them. https://i.sstatic.net/1GGh1.png I am wondering how I can organize these input fields and the button i ...

javascripthtmlangulartypescriptbutton

Leveraging material elements in React applications

I have been studying the guide on Material UI Beta for react and I am interested in creating a simple component using the Drawer element. Here is an example code from the official documentation that demonstrates how to build such a Component. import React ...

javascriptreactjsmaterial-ui

To compare two JSON files that contain identical values but different keys in order to generate a consolidated table

My goal is to create a comprehensive table by merging data from two different JSON files. One file contains names, work positions, and ages, while the other file includes emails, names, and job roles. The challenge lies in the fact that they use different ...

javascriptjqueryjsonmustache