Troubleshooting: jQuery unable to locate element within iframe

I need help finding all elements within an iframe that contain a specific word, for example, 'stack' on this page: http://en.wikipedia.org/wiki/Stack_Overflow

Here is the code I am currently using:

<body>
    <iframe src="http://en.wikipedia.org/wiki/Stack_Overflow"></iframe>
</body>
<script type="text/javascript">
        var iframe = $('iframe');
        $( "iframe" ).contents().find( "stack" ).css( "background-color", "#BADA55" );
</script>

I have also added CSS and other elements to make the page complete, as well as included the jQuery library.

However, the code is not functioning as expected - no elements are being selected and the CSS is not being applied. Can anyone identify where the issue lies? Thank you!

javascriptjqueryhtmlcssiframe

Answer №1

Give this a shot

$( "iframe:contains('stack')" ).css( "background-color", "#BADA55" );

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

Achieving camera zoom in threeJS without the use of trackball controls or any other camera control libraries

Currently, I'm utilizing threeJS to manipulate a camera within my scene. The camera is configured to orbit in a circular motion around an object when the left and right keys are pressed on the keyboard. However, I am seeking guidance on how to impleme ...

javascript3dthree.js

Identifying the presence of a period within a string

Forgive me for what may seem like a foolish inquiry, but I am unsure of how to search a string to determine if it includes a period. Here's what I have attempted: var text = "This is an example without a period. What next?" alert(text.search(".")); ...

javascriptjquerysearch

Dynamic Content Sorting with JavaScript and jQuery

I am presenting various courses that are available, and I am utilizing JavaScript/jQuery to display or hide them based on element classes. You can view the page here. Currently, the script conceals all content on the page and then reveals items that matc ...

javascriptjqueryhtml

Encountering an issue with blogs.map function in a Next.js application

import Head from 'next/head' import { useState } from 'react' import Image from 'next/image' import styles from '../styles/Home.module.css' const Home = (props) => { const [blogs, setblogs] = useState(props.dat ...

javascriptreactjsnext.jsweb-development-server

oversized user interface selection container

When using semantic-ui for my search form with large input fields, I am facing an issue where the select option field does not adjust its size. I have followed the documentation but it seems like I might be missing something. Can someone help me figure out ...

htmlcsssemantic-ui

Error in AngularJS ng-repeat syntax

As a newcomer to AngularJS, I ventured into creating a Bootstrap form with a loop but encountered an error. What could be the mistake I made? <form class="form-horizontal" role="form" name="newForm" novalidate ng-controller="newFormController"> < ...

javascriptangularjstwitter-bootstrap

Transfer information from the client to the server using AJAX and PHP by

When attempting to post a JavaScript variable called posY to a PHP file, an error occurred with the message: Notice: Undefined index: data in C:\xampp\htdocs\Heads_in_the_clouds\submitposY.php The posY variable is defined in the JavaSc ...

javascripthtmlcanvas

Guide to redirecting data from an external POST request to a customer through a GET request

Within my Express application, I am currently dealing with both incoming POST requests containing a payload from an external source and GET requests sent by my client: router.post('/liveReleaseStore', (req, res) => { let data = req.body.m ...

javascriptnode.jsexpress

Previewing multiple images before uploading them using jQuery

Currently, I am utilizing the following code for my image uploader: HTML: <input type="file" id="files" name="files[]" multiple /> <ul id="list"></ul> JavaScript: function handleFileSelect(evt) { var files = evt.target.files; // FileL ...

javascriptjqueryuploadpreview

Include the document when the query results in zero documents

Struggling to figure out how to add a document to a collection if a query returns no results. The current query lacks operators for checking the length or size of the result. How can this be achieved? The query in question: this.monthCollection = this.af ...

javascriptangularionic-frameworkgoogle-cloud-firestore

What is the best way to input keys into the currently selected element?

During my experimentation, I discovered that several modals and dropdowns in my tests open with their input boxes automatically focused. I found a way to verify if an element is in focus, but I'm wondering if there's a quicker method to input ke ...

javascriptseleniumselenium-webdriverprotractor

HTML - Align 3 tables horizontally with text below

I have successfully floated 3 tables next to each other using <table style="float:left;">. However, I am facing an issue where some text is being wrapped to the right side of the right-most table instead of being left-justified at the very ...

htmlcss

The Angular routing functionality appears to be malfunctioning

I am currently implementing routing in my project using basic angular route with Angular 1.3.0. Here is the content of my app.js file: 'use strict'; var routerApp = angular.module('mcw', [ 'ngRoute', 'mcw.controll ...

javascriptangularjsroutessingle-page-applicationangularjs-routing

Error: The OrbitControls function is not recognized in THREE.JS

const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const controls = new OrbitControls(camera); camera.position.set(200, 0, 0); controls.update(); const geometry = new THREE.S ...

javascriptthree.js

finishing a stylish box from its individual iframe webpage

I have successfully utilized fancy box in my project with the code snippet below: $("#tip5").fancybox({ 'width': 400, 'height': 370, 'enableEscapeButton' : false, 'overlayS ...

phpjqueryajaxfancybox

Is it possible to incorporate variables when updating an array or nested document in a mongodb operation?

Within the "myCollection" target collection, there exists a field named "japanese2". This field is an array or an object that contains another object with a property called "japanese2a", initially set to 0 but subject to change. My goal is to update this p ...

javascriptnode.jsarraysmongodbexpress

Issues arising when checking the responsiveness of the navigation bar on display

Recently, I encountered an issue with the navigation bar on my webpage. It contains an image logo on the left and three links on the right. The problem arises when I test the responsiveness using different devices on Chrome; the navigation bar resizes and ...

htmlcssresponsive-design

If TextBoxes overlap, the one that is defined earlier in the ASPX file cannot be clicked on

Managing the visibility of multiple controls can be tricky, especially when they have overlapping coordinates. Take for example two TextBoxes, txtName and txtEmail, positioned at the same x/y coordinates: <div style="position: absolute; top: 55px; ...

c#htmlasp.net

Retrieve Cookie from a designated domain using Express

I am currently working on a React application that communicates with a Node/Express backend. To ensure the validity of requests, I am sending a cookie created by react-cookie from the React app to the Express app. To avoid issues related to naming conflict ...

javascriptnode.jsreactjsexpresscookies

Nextjs attempting to access local storage without proper initialization

I'm currently working on a feature where I have a sidebar with two buttons, contact and profile. When a user clicks on either of them, the URL updates to: /?section=clickedItem, allowing the user to save the state and return to that specific page upon ...

javascriptreactjsnext.js