JavaScript

123K

Solutions

42K

Contributors

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

Share tech news, updates, or what's on your mind.

Sign up to Post

I researched Csrf and CORS. what I understood was

say User A is authorized to access a site, but it is possible to exploit and execute say javascript from user A's browser to perform unintended actions from his/her browser.

To avoid this, browsers has same origin policy , where If I have a website say in one domain,

www.mywebsite.com and I have some javascript in my web page that makes an AJAX calls to say a api in a different domain, say www.yourdomain.com/api/users or something like this.

browser will see my domain is mywebsite and the call is being made to yourdomain.com and it will block it.

to be able to make a successful call from mywebsite to the api hosted at www.yourdomain.com. the yourdomain server   has to send Access-Control-Allow-Origin in response .

I am not clear on one thing,

so say,

1. if i make an ajax call to the api ( a get call)
2. does the api send the Access-Control-Allow-Origin header in the response header, along with the data for the get call?

Question:


1. is this done in 1 call or is it done in two steps, first browser calls to see if the server sends back
Access-Control-Allow-Origin in the header and then it issues a Get call?

2. if the call is not from the browser , and my backend code calls this api, does the CORS policy apply then?

I apologize for the long questions, I wanted to see if i can explain what i understood before I asked the question.
0
I'm working on a Nodejs application and I want to give the user the opportunity to view the password they're attempting to set.

I've seen this option before where you can click on an "eye" icon and you can see the characters that would otherwise be represented by asterisks.

How do you pull that off?
0
I have a functional control that contains a form that has a couple of inputs on the form. I was attempting to use a single handleChange function to process the data input into the input fields but, I ran across a problem that I did solve, by separating the handleChange function into 2 functions: 1 for each input control, but I don't understand why I had to do it this way. I'm including my code and want to know why I had to do it this way, or was I missing something when I attempted to handle it in 1 handleChange function.

The problem (what wasn't working): When I would type into the password field, it would post the input in the username input field. When I stepped through the handleChange code, the control that always showed up was the username control, EXCEPT for when the page first loads. When the page would first load, if I typed into the password control, when I stepped through the handleChange function, the password control would be correctly passed to the function. After that, no matter which field I typed into, the control passed to the handleChange function was ALWAYS the username control.

WHAT DIDN'T WORK
    const [username, setUserName] = useState('');
    const [password, setUserPassword] = useState('');

    const handleChange = (e) => {
        const { name, value } = e.target;

        if (e.target.name = "username")
            setUserName( () => value );
        else
            setUserPassword( () => value );
    }

    return (
        <div 

Open in new window

0
Hi Team,

my requirement is like select 1 from drop down it means January so only January should be enable on date picker , other months should be disable . if need more clarification please let me know .
below is my code please help me out where i m doing wrong.



var monthYear=0;
monthYear = $('#mYear').val();; 
		alert(mYear);
		$("#pdate").datepicker
			({
	   			minDate:"dateToday",
	   			dateFormat: 'dd/mm/yy',
	   			changeMonth: true,
	   			numberOfMonths: 1,
	   			onClose: function (selectedDate) {
	 						$("#pdate").datepicker("option", "minDate", selectedDate);
	   								},
	   							//Code to disable dates according to selection
	   							beforeShowDay: filterDate
			});
 var filterDate = function(date) {
     if(monthYear=='0'){
       return [true];
     }else{          
       return [(1+date.getMonth()) == monthYear];
     }
 }
  $(document).ready(function() {  
	 $("#sdata").click(function(evt) {
		evt.preventDefault();
		 if(save()){
			$.ajax({
				url: "Test.jsp",
				type: "post",
				data: {
				pS:$('#pS').val(),
				pType:$('#pT').val(),
				pCode:$('#pC').val(),
				mYear:$('#mYear').val(),
				pDate:$('#pdate').val(),
				ppDate:$('#ppdate').val(),
				bDate:$('#bdate').val()},
				success: function(responseFromServer) {
	            	$.each(responseFromServer, function(resultMessageKey,resultMessageValue) {	
	                    $('#content').html(resultMessageKey);
	                });
	            	getClearDateValues();
	    

Open in new window

0
I am trying to pass the screen width to html tag
the following is not working

<html>
<script language='javascript'>
        function GetScreenWidth()
        {
        return  screen.width;
    }
</script>
........
<td align="right" width="GetScreenWidth();">
0
I have a PDF with two text fields on it "Today" and "Tomorrow".  I am trying to have the form read the "Today" field and then display "Today" + 1 day in the "Tomorrow" field.  So, if the "Today" text field is 2/18/2020 then the "Tomorrow" text field will read 2/20/2020.  Here is the code I have so far:
this.addScript("init", "var d = new Date(); var f = this.getField(\"Today\"); if (f.value==\"\") f.value = d; var t = this.getField(\"Tomorrow\"); t.value = t.setDate(d+1);")
0
I have a coldfusion page with a form on it. If I click on a field, use the backspace key to delete the current value, and then enter a new value the form works correctly. If I use the mouse to highlight the data in a field then when I release the mouse the code does not work correctly, it goes to the file defined in the action. When it work correctly the action file is called without refreshing the screen. I have not been able to create a sample page that demonstrates this. A simple example of my form is:

      <form method="post" id="frmUpdateIssue" name="frmUpdateIssue" action="d7a.cfm">
            <input type="hidden" name="iIssueID" value="23">
            <input type="text" name="testVar" onfocusout="ClickEvent()" value="7" />
      </form>
      
      <script type="text/javascript">
            function ClickEvent ()
            {
                  jQuery("#frmUpdateIssue").submit();
            }
      </script>

I understand that when I release the mouse button that the ClickEvent function should be called. What I don't understand is that when I highlight the value using the mouse and then release the mouse that the line:

jQuery("#frmUpdateIssue").submit();

behaves differently (page is redirected to d7a.cfm) than when I use the backspace key to delete the value and then type in a new value. In this case the ClickEvent function is called and the form is submitted without a redirect to a new page or screen refresh
0
I have a site I am working on that when you do a search for a post_type, it won't change the title.  I have the following hack but it does not work because it runs before the jQuery library is included.

function searchfilter($query) {
    if ($query->is_search && !is_admin() ) {
        if(isset($_GET['post_type'])) {
            $type = $_GET['post_type'];
                if($type == 'product') {
                    ?>
    <script>
    (function($){
        var term = '<?php the_search_query(); ?>';

        $('.archive-title').text("Your Search for: " + term + "");
        })(jQuery);
    </script> 
    <?php
                }
        }       
    }
return $query;
}
add_filter('pre_get_posts','searchfilter');

Open in new window


You can see what I mean here: https://gardenersstage.wpengine.com/?s=seeds&post_type=product
"Shop Our Store"  Should say "Your Search for: " + term + "" Or do you know how to change the title of the page if the post type is set?
0
jQuery Radio Button on Change Function not working.

<script>
    (function ($) {
   $("input[name=shipping_method[0]]:radio").change(function () {
        alert('HOLA');
 });
}) (jQuery);
    </script>


	<ul id="shipping_method" class="woocommerce-shipping-methods">
									<li>
						<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate1" value="flat_rate:1" class="shipping_method"  /><label for="shipping_method_0_flat_rate1">Flat rate: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>102.00</span></label>					</li>
									<li>
						<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate3" value="flat_rate:3" class="shipping_method"  /><label for="shipping_method_0_flat_rate3">Fed Ex: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>39.00</span></label>					</li>
									<li>
						<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate4" value="flat_rate:4" class="shipping_method"  checked='checked' /><label for="shipping_method_0_flat_rate4">UPS: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>39.00</span></label>					</li>
									<li>
						<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate5" value="flat_rate:5" class="shipping_method"  

Open in new window

0
search.png
The above image is a potential flow for a user doing a search of multiple, independent databases in a microservices architecture. We are considering using Kafka.

The basic flow is:
1. The UI initiates a search (keyword).
2. a Microservice receives the request on the backend.
3. Publishes the request, which is subscribed to by the myriad of databases (wrapped in microservices.)
4. The microservice (same or different) receives the responses and "collates" them.
5. The UI receives the collated data and displayed it.

The questions are:

1. How much of the UI should be run on the client-side, and how much on the server-side.

2. What is the best Javascript to use (to interface with Kafka, specifically. Angular, Node, React, ...?)

3. What is the best interface method for the UI to talk with Kafka (REST & web gateway, something else?)
0
My HTML forms are below where checkbox are there with each and every row i want that all row disabled once form loaded . when we click on particular checkbox or multiple checkbox's then only particular row or multiple row's is enabled for update the data . hope you guys understand what exactly i need.


<form action="" method="post">
            <table id="phone" width="100%" name="phone">
                  <tr>
                        <th>Check/UnCheck</th>
                        <th>MYear</th>
                        <th>P Date</th>
                        <th>Q Date</th>
                        <th>B Date</th>
                  </tr>
                  <%
                        for (int i = 0; i < 5; i++) {
                  %>
                  <tr>
                        <td><INPUT type="checkbox" data-row="row<%=i%>" class="chkValues" id="ckbCheckAll" name="chkBox" type="checkbox" value="<%=i%>" size="50"></td>
                        <td align="left"><input class="inputText row1" type="text" name="mYear" id="mYear"  value="2020"></td>
                        <td><input class="date row<%=i%>"  id="pDate<%=i%>" name="pDate" type="text" value="24/01/2019" /></td>
                        <td><input class="date row<%=i%>" id="qDate<%=i%>" name="qDate" type="text" value="28/01/2019" /></td>
                        <td><input class="date row<%=i%>" id="bDate<%=i%>" name="bDate" type="text" value="31/01/2019" /></td>
                  </tr>
                  <%
                        }
                  %>
            </table>
            <input id="btnSubmit" type="submit" name="submit" value="submit" />
            </p>
      </form>
0
what are some of the common issues , one might run into using sequelize ORM in a node js environment.


I have heard with application and database grows large and complex , and due to how node js works , single threaded , using sequelize ORM might turn into lot of complex coding.

I haven't tried it, but would like to see if there are any common issues that people have run into .
0
I have a HTML5/js web page that was working fine and stopped working a short time ago.  I have placed this web page temporally at: https://www.barnwellmd.com/temp/test.html so I can delete it after I close this question (it saves files on my server and sends me an email).  

The problem is when a user clicks on "Send to Dr. Office" a popup shows "<head><title>Not Acceptable!</title></head><body><h1>Not Acceptable!</h1><p>An appropriate representation of the requested resource could not be found on this server. This error was generated by Mod_Security.</p></body></html>" and nothing is sent.

That button calls the sendCanvas() function:
function sendCanvas()
{
      if (checkFields()) return;
      clearGray();
      createPrint();
      var testCanvas = document.getElementById("imageView");  
      var canvasData = testCanvas.toDataURL("image/png");
      //alert(canvasData);
      var ajax = new XMLHttpRequest();
      //alert ('https://www.barnwellmd.com/Uploadroutines/uploadbase64.php?name=' + document.form.ptname.value.replace(/ /g,"_"));
      ajax.open("POST",'https://www.barnwellmd.com/Uploadroutines/uploadbase64.php?name=' + document.form.ptname.value.replace(/ /g,"_"),false);
      //ajax.open("POST",'https://www.barnwellmd.com/Uploadroutines/uploadbase64.php',true);    
      ajax.setRequestHeader('Content-Type', 'canvas/upload');
      //ajax.setRequestHeader('Content-Type', 'application/upload');
      ajax.onreadystatechange=function()
      {
            if (ajax.readyState == 4)
            {
                  alert(ajax.responseText);
                  …
0
hi am having error in angular
type32
import {Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import {HttpClient} from '@angular/common/http';

import {Post} from './post.model';

@Injectable({providedIn: 'root'})
export class PostsService{
    private posts: Post[] = [];
    private postsUpdated = new Subject<Post[]>();

    constructor(private http: HttpClient){}

    getPosts(){
        this.http.get<{message: string,posts: Post }>('http://localhost:3000/api/posts')
          .subscribe((postData) =>{
        this.posts[] = postData.posts;
        this.postsUpdated.next(...this.posts);
    });
    }

    getPostUpdateListener(){
        return this.postsUpdated.asObservable();
    }

    addPost(title: string, content: string){
        const post: Post = {id:null,title: title,content: content};
        this.posts.push(post);
        this.postsUpdated.next([...this.posts]);

    }
}

Open in new window

0
HI Team ,

i have an issue which i am tackling but not able to get right . please help me out on this i have 3 date picker regarding all 3 date picker details below -

1) 1st date picker all previous date are disable from system date .
2) 2nd date picker date's enable only should be greater then date selected in 1st date picker.
3) 3rd date picker date's are enable only more then 6 day's from system date.


code are below please help me out on this and let me know if you guys need more clarification.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet"
	href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  
  
var totalRowCount = $("#tableData tr").length;
var rowCount = $("#tableData td").closest("tr").length;
var message = "Total Row Count: " + totalRowCount;
message += "\nRow Count: " + rowCount;
alert(message);
var i = 0;
<%
for(int i=0; i<=8; i++)
{%>
    //$(".Numbers tr").append("<td>"+ i +"</td>");
    
$("#pDate<%=i%>").datepicker({
   dateFormat: "dd/mm/yy",
   minDate: 0,
   onSelect: function (date) {
       var date2 = $("#pDate<%=i%>").datepicker("getDate");
       date2.setDate(date2.getDate() + 1);
       

Open in new window

0
I have one Jquery[ Written in $(document).ready(function ())] on my master page which identify Input controller.

Now this Jquery calls a JavaScript function which is written in .js file and it shows Alert box when Special Character identify in Input controller.

On child page we have textbox along with submit button. There are two scenario below, in which second is giving problem.

1. When we enter special character along with some text in textbox and hit on other area of the screen Alert box comes up with proper message[Which is Correct and working as well].

2. When we enter special character along with some text in textbox and Hit on Submit, It Shows Alert box with the right message but then function on submit button got called and popup comes up which hides our Alert Box.[Now this is the Problem].

Note that, this thing is happening in EDGE browser only.
0
Hi my requirement is that i have a 3 date fields which are coming from database . its shows in tabular format in jsp page a checkbox is there in each and every row when i click on checkbox then we can select all 3 dates with date picker select a new date submit . my requirement is when we select 1st date then in when we open the second date picker only those dates are able to select which is more then first date . same as 3rd date picker when click and open 3rd date picker only those dates are able to select which is more then third date.code are below .

my java script code are below -


$(document).ready(function() {

	$(".date").datepicker({dateFormat:'dd/mm/yy'});
	$('.chkValues').on('click', function() {

		//get values of dates
		var array = [];
		var parent = $(this).closest('tr');
	    
	    // Now find all the child <inpu> elements with class "date"
	    var last = 0;
	    var lbl = ['PDate','PaDate','bValue'];
	    $('.date', parent).each(function(i,e) {
	      var dt = new Date(e.value.split("/").reverse().join("-"));
	      console.log(dt.getTime());
	      if (dt.getTime() <= last) {
	    	  alert('Error: ' + lbl[i] + ' date must be greater than ' + lbl[i-1] + ' date');
	      }
	      last = dt.getTime();
	    });
		$row = $(this).data('row'); //row1, row2, row3 etc
		$('input.' + $row).each(function() {
			array.push($(this).val());
		});
		$('#btnSubmit').click(function(evt) {
    	evt.preventDefault();
    	var 

Open in new window

0
In my jsp page one bug is coming like below -

3 dates are coming from database when i m updating if i change the date through date picker then click on checkbox then submit it working fine date are saving
perfectly to database . but if i check the check box first then change the date from date picker then submit new date is not updating in database .hope you understand
if not please let me know i will get more specific .


 my java script code are below -


$(document).ready(function() {

	$(".date").datepicker({dateFormat:'dd/mm/yy'});
	$('.chkValues').on('click', function() {

		//get values of dates
		var array = [];
		var parent = $(this).closest('tr');
	    
	    // Now find all the child <inpu> elements with class "date"
	    var last = 0;
	    var lbl = ['PDate','PaDate','bValue'];
	    $('.date', parent).each(function(i,e) {
	      var dt = new Date(e.value.split("/").reverse().join("-"));
	      console.log(dt.getTime());
	      if (dt.getTime() <= last) {
	    	  alert('Error: ' + lbl[i] + ' date must be greater than ' + lbl[i-1] + ' date');
	      }
	      last = dt.getTime();
	    });
		$row = $(this).data('row'); //row1, row2, row3 etc
		$('input.' + $row).each(function() {
			array.push($(this).val());
		});
		$('#btnSubmit').click(function(evt) {
    	evt.preventDefault();
    	var pCode=document.getElementById("pcode").value;
    	var prType=document.getElementById("prtype").value;
    	var prCode=document.getElementById("prcode").value;
   

Open in new window

0
my menu disappear in my application
menu
import { Component, OnInit } from '@angular/core';
import {HardcodedAuthenticationService} from './../service/hardcoded-authentication'
 
@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
  isUserLoggedIn: boolean = false;
 
  constructor(private hardcodedAuthenticationsService : HardcodedAuthenticationService ) { }
 
  ngOnInit() {
    this.isUserLoggedIn = this.hardcodedAuthenticationsService.isUserLoggedIn();
  }
 
}
 

Open in new window

===
<header>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <div><a href="https://www.tshedza.co.za" class="navbar-brand">Tshifhiwa Madima</a></div>
     
        <ul class="navbar-nav">
            <li><a *ngIf="hardcodedAuthenticationsService.isUserLoggedIn()" routerLink="/wellcome/tshifhiwa" class="nav-link">Home</a></li>
            <li><a *ngIf="hardcodedAuthenticationsService.isUserLoggedIn()" routerLink="/todos" class="nav-link">TODOS</a></li>
        </ul> 
        <ul class="navbar-nav navbar-collapse justify-content-end">
            <li><a *ngIf="hardcodedAuthenticationsService.isUserLoggedIn()" routerLink="/Login" class="nav-link">Login</a></li>
            <li><a *ngIf="!hardcodedAuthenticationsService.isUserLoggedIn()" routerLink="/logout" class="nav-link">LogOut</a></li>
        </ul>
 
    </nav>
</header>

Open in new window


==
import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class HardcodedAuthenticationService {
 
  constructor() { }
 
  authenticate(username, password) {
    //console.log('before ' + this.isUserLoggedIn());
    if(username==="tshifhiwa" && password === 'dummy') {
      sessionStorage.setItem('authenticaterUser', username);
      //console.log('after ' + this.isUserLoggedIn());
      return true;
    }
    return false;
  }
 
  isUserLoggedIn() {
    let user = sessionStorage.getItem('authenticaterUser')
    return !(user === null)
  }
 
  logout(){
    sessionStorage.removeItem('authenticaterUser')
  }
 
}

Open in new window

0
hi am having blank page when starting application
blankimport React, { Component } from 'react';
import FirstComponent from './components/learning-example/FirstComponent'
import logo from './logo.svg';
import './App.css';
 
 
 
function FirstApp(){
  return(
    <div className="App">
      FirstApp
    </div>
  );
}
 
 
function App() {
  return (
    <div className="FirstComponent">
      My hello
      <FirstComponent></FirstComponent>
      <SecondComponent></SecondComponent>
      <ThirdComponent></ThirdComponent>
      <FirstApp></FirstApp>
    </div>
  );
}
 
//class component
 
class SecondComponent extends Component{
  render(){
    return (
      <div className = "secondComponent">
           <LearningComponents></LearningComponents>
      </div>
    );
  }
}
 
function ThirdComponent(){
  return(
    <div className = "ThirdComponent">
    ThirdComponent
  </div>
);
}
 
class LearningComponents extends Component{
  render(){
    return (
      <div className = "LearningComponents">
        My hello world
        <FirstComponent></FirstComponent>
        <SecondComponent></SecondComponent>
        <ThirdComponent></ThirdComponent>
        <FirstApp></FirstApp>
      </div>
    );
  }
}
   
 
 
 
 
 
 
export default App;
0
hi am having multiple button in my angular application
multiple
0
Hi,

I have a table looking like this. I would like to be able to use the arrow keys to navigate to the different cells and input elements. If I press the down arrow key the cell input right below, the right arrow to right and so on. Is there a way for me to accomplish this?

<table class="table table-bordered table-webbox fixed_header" id="tableMain">
                        <thead class="bg-grey-cararra">
                            <tr>
                                <th class="td1">
                                    <span id="ctl00_ContentMain_dlSchema_Label3">Dag</span>
                                </th>
                                <th class="td1">
                                    <span id="ctl00_ContentMain_dlSchema_Label4">Sch</span>
                                </th>
                                <th class="td2">
                                    <span id="ctl00_ContentMain_dlSchema_Label5">Arb.tid</span>
                                </th>
                                <th class="td2">
                                    <span id="ctl00_ContentMain_dlSchema_Label6">Sj</span>
                                </th>
                                <th class="td2">
                                    <span id="ctl00_ContentMain_dlSchema_Label8">VAB</span>
                                </th>
                                <th class="td2">
                                    <span id="ctl00_ContentMain_dlSchema_Label19">FÖ</span>
       

Open in new window

0
In my dropdown list with product item numbers, I have implemented a function that scrolls to the selected item number when users open the dropdown.

However, this should only run once a user has selected an item number by himself. Otherwise the top of the dropdown list (first item) should be shown.

Per default item number of 10 is selected.

Problem:

When you open the dropdown, it automatically scrolls to the default position of 10.

    scrollDropdownToSelectedOption(selector) {
        const selectedOption = selector.find('.selected');

        if (selectedOption.length === 0) {
            return;
        }

        const dropdown = selector.find('.js-options-list');
        let scrollPosition;

        if (this.deviceManager.getCurrentState() === MOBILE) {
            const mobileLabel = selector.find('.js-mobile-label');

            scrollPosition = -(mobileLabel.outerHeight() - selectedOption.offset().top + selectedOption.outerHeight());
        } else {
            scrollPosition = -(selector.offset().top - selectedOption.offset().top + selectedOption.outerHeight() * 2);
        }

        dropdown.scrollTop(scrollPosition);
    },

Open in new window


By default 10 has the class 'selected' hence it is scrolled to this position.

I will need some condition that scrollDropdownToSelectedOption() should only run if no option from the dropdown list was clicked.
Bildschirmfoto-2020-01-31-um-15.30.5.png
0
Trying to Integrate an Angular 7 component into an Angular JS (1.X) component via 'iframe'. This is for a very large application that is integrating Angular 1.X, Angular 5, Angular 7 and MVC.

The issue is that when the code generated by the Angular 7 component is displayed in the Angular 1.X template, the master header, footer and nav bar for this segmented part of the Angular 1.X application is automatically displaying with the Angular 7 code. How can I turn off these 1.X artifacts from within the 7.0 output?

This is happening because of the use of the iFrame, but rather than rewrite the entire section of the 1.X code at this time, my client wants me to generate the new code in 7.0 and have it display in the 1.X section via an iFrame.

Are there any other alternatives to get this code displaying from the 7.0 code into the 1.X code so that the default master header, footer and nav bar are not displaying?
0
We've built a web tool that collects health data via a set of questions that can be embedded as an iFrame in various websites that wish to have this data collected.

This all seems to work fine and the iFrame loads for all customers' sites. However, sometimes certain browsers will fail to load the iFrame - a user will see a blank space where our content/questions should load.

The occasional glitch hasn't been a huge worry although we think this is happening more regularly now. This suggests it might be something in newer broswer releases that is tightening security. It has been happening more often on handheld devices as well as laptops etc.

At the same time we've noticed other iFrame offered services still continue to work (such as Stripe credit card pop-ups) on these same devices/laptops which means they are probalby doing something different.

Any ideas what we might do?

Thanks in advance
Iain
0

JavaScript

123K

Solutions

42K

Contributors

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.