Different sources for multiple iframes

Greetings everyone,

I am facing an issue with multiple iframes on my page, each with a different src attribute. Despite specifying unique sources for each iframe, upon loading the page, they all seem to be loaded with the same src.

<html><body>
<iframe id="1" name="iframe1" src="page.php?id=1"></iframe>
<iframe id="2" name="iframe2" src="page.php?id=2"></iframe>
<iframe id="3" name="iframe3" src="page.php?id=3"></iframe>
</body></html>

Can anyone help me identify where the problem lies and suggest possible solutions?

jqueryhtmliframe

Answer №1

When using CSS2, it's important to note that a CSS ID cannot start with a digit as stated in the official documentation. To ensure compatibility, consider changing the IDs like this:

<iframe id="iframe1" name="iframe1" src="page.php?id=1"></iframe>
<iframe id="iframe2" name="iframe2" src="page.php?id=2"></iframe>
<iframe id="iframe3" name="iframe3" src="page.php?id=3"></iframe>

It's also recommended to verify if the pages page.php?id=1, page.php?id=2, and page.php?id=3 are indeed rendering different content by accessing the URLs through the developer toolbar.

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

Angular mobile navbar experiencing collapse issue

I am working on an Angular project that does not include Jquery. I am trying to implement a navbar using mdbootstrap, but I am encountering issues with the collapse feature not working properly. Below is the HTML content I am using: <header> < ...

htmlangularmdbootstrap

The longevity of JQuery features

As I work on setting up an on-click callback for an HTML element to make another node visible, I encountered a surprising realization. The following two statements appeared to be equivalent at first glance: $("#title").click($("#content").toggle); $("#tit ...

javascriptjquery

"Learn how to retrieve and assign a value to a select2 dropdown in Vue.js

Currently, I am utilizing vuejs to create and delete dynamic select elements, which is functioning properly. To view the working example, please click here: https://jsfiddle.net/nikleshraut/fgpdp700/2/ var vm = new Vue({ el: "#app", data: { opt ...

javascriptjqueryvue.jsjquery-select2

Is it possible for a Simplemodal popup to appear only once per user session

I'm completely new to javascript and jQuery. Recently, I've started using SimpleModal basic from SimpleModal to show a popup upon visitors landing on my website. Everything seems to be working perfectly, but there's one issue - the popup kee ...

javascriptphpjquerycookiessimplemodal

Is It Always Necessary to Specify a Width and Height for an Image?

Is it necessary to specify both the Width and Height of an image on a webpage for consistent display across all browsers, or is specifying just one sufficient? While it may appear fine on certain browsers, I want to double-check for accuracy. Appreciate ...

html

Assign an AJAX call to retrieve data from a MySQL table and store it in a

In my database, I have a table that includes fields for 'user_name' and 'user_round'. My goal is to set the 'user_round' field to match the value of a JavaScript variable called 'Level'. However, when I run my code, ...

javascriptjquerymysqlajax

Updating the class of a div based on a checkbox being checked or unchecked

I am attempting to apply the "isChecked" class to the parent div when a checkbox is checked, using the ngClass directive. Here is the HTML: <div ng-class="{isChecked: (isChecked_1 == 'true')}"> <input type="checkbox" id="check_ ...

htmlcssangularjs

Bootstrap 4 Nav Table of Contents with Expand and Collapse Feature

Currently, I am encountering an issue with implementing a button to expand and collapse a "table of contents" in Bootstrap 4. The code I have so far can be viewed here: https://codepen.io/nht910/pen/RwwwyKB Code Snippet: <div class="main-wrapper col- ...

javascripthtmlcsstwitter-bootstrap

Ensure portrait orientation images have a restricted width to maintain their aspect ratio

On a responsive site, I have set up flexslider to showcase both landscape and portrait orientation images. The smoothHeight: true option is enabled to adjust the height according to the images. However, at the largest media query where the flexslider cont ...

jquerycssflexslider

Position icons and images on the right side, and the textarea on the left side of the page (using Twitter

Summary: Here is the desired end result shown in the image below. Alternatively, you can refer to the JSFiddle. Ideally, only CSS should be used without changing the DOM structure. The icons need to be aligned completely to the right using the .pull-right ...

csshtmltwitter-bootstraptwitter-bootstrap-3

The malfunction of Bootstrap modal in iterative scenarios

I am currently developing a comprehensive method for handling AJAX requests in my JavaScript code, but I am facing some issues with the Bootstrap modal not functioning as intended. Here is the HTML structure: <div class="modal fade" id="consult_modal_ ...

javascriptphpjqueryajaxtwitter-bootstrap

Tips for integrating the SlitSlider jQuery plugin into your website

Trying to incorporate the SlitSlider carousel into my project has proven challenging due to a lack of thorough documentation. Has anyone successfully implemented this? I keep encountering the error message: TypeError: self._init is not a function You can ...

jqueryslideshowcarousel

Avoid the ability for individuals to interact with the icon embedded within a button

I'm currently working on a website where users need to interact with a button to delete an "Infraction." The button has a basic bootstrap style and includes an icon for the delete action. <button referencedInfraction="<%= i.infractionID %>" ...

javascripthtmljquerytwitter-bootstrap

I'm having trouble getting my login page centered when using Semantic UI

Currently, I am working on creating a login page using Semantic UI. However, I am facing an issue where the column is not aligning to the center as intended; instead, it is occupying the entire page. I have attempted to link all the necessary files in the ...

htmlcsssemantic-ui

How can I showcase the index of `<tr>` and `<td>` elements in a dynamically generated table

How can I print the index of table rows and data on click in javascript? <html> <head> <title>Table Creation</title> <script language="javascript" type="text/javascript"> function createTable() { ...

javascripthtmlcss

Click on the div to automatically insert its text into the textarea

I am looking for a way to enable users to edit their posts easily. My idea is to have them click on a link, which will then hide the original div containing their post and reveal a new div with the old text inside a textarea for editing. Despite searching ...

javascriptjqueryhtml

Aligning two divs both horizontally and vertically within two adjacent columns each with a width of 50%

Struggling to align two divs both vertically and horizontally within their respective parent containers that are placed side by side with 50% width and 100% height? Check out my solution on Codepen for reference. View Codepen Example *** HTML *** <di ...

htmlcssresponsive-designvertical-alignment

What methods can be utilized to avoid displaying a Bootstrap popover intermittently within an AngularJS framework?

When using the bootstrap popover in a custom AngularJS directive, I need to display an error message when the button is disabled by setting $scope.buytypeButton= {type:false}. The error message should be displayed in a popover. On the other hand, when $sco ...

javascriptjqueryangularjstwitter-bootstrapangular-ui-router

"Enhancing User Interactions with Hover Effects and Click Events

I am working on a project that involves 4 links that alter the position of 4 divs within a webpage. In order to change the color of the links when hovering over them, I have implemented the following jQuery script: $('a.menua').hover(functio ...

jqueryclickhover

Steps to turn off the automatic completion feature for orders in WooCommerce on your WordPress website

Looking for assistance with changing the order status from completed to processing. When an order is placed, it automatically goes to completed status which is not the desired outcome. The status should change based on the virtual product purchased. I wou ...

javascripthtmljquerycsswordpress