How to load multiple iframes with same src on one page - javascript

I am creating a WordPress based website and I have a web page where there are multiple iframes with the same src.When I load this page all iframes are showing the same result, but every iframe should have different iframe content with the values sent using session(used for sending data from a PHP file to another PHP file) from where iframe is defined to the iframe src.The web page basically contains users of the website giving different reviews.The iframe in the web page is used for displaying star rating given in each user review.So, each iframe is displayed with values(userid,etc.) to display user's star rating and other user related data.
An image of a webpage:
An image of the iframe:

Use Ajax instead if it's on the same server.

Related

jQuery attr call not being applied to content as user scrolls and more content loads

I am trying to build a Google Chrome extension that blocks some images in posts from a user's Reddit feed based on some computer vision criteria that run in a Python back-end. I have found a way using jQuery to query the Reddit JSON and insert a replacementImage in place of the existing post image (code below), but the current block I am hitting is that when the user scrolls the page, the jQuery attr call does not impact posts/images down the page (i.e., after more posts load).
var replacementImage = "https://upload.wikimedia.org/wikipedia/commons/c/cb/CENSORED.JPG"
$('img[alt="Post image"]').attr("src",replacementImage)

How to make multiple iframes with same src in the same page load independently?

I am building a Wordpress website,there is a webpage that contains multiple iframes wth same src.When i refresh the webpage all iframes show the same content,but it should show different content based on the value passed by using session(method for passing values from one php file to another php file) from where the iframe is defined to where iframe src is defined.The iframe is defined in a plugin file and iframe src is defined as a template in theme folder.
So how to load multiple iframes with same src load independently?

A live view of an external website

How do you get a div that is populated with a live screen image of an external website without using iFrames? e.g. www.google.com
I want to produce a portfolio website, I have a number of sites that are regularly updated. What I want to do is have javascript open on page load, I want it to find a specific external site (e.g. www.google.com) and then take a screenshot. Then I want it to display the screenshot on my portfolio page. Or show a live view of the website inside a div. I dont want to use iFrames as I feel it just looks out of place. I don't need the JS to save the screenshot, just to display it.

How to preload and cache URLs/links using JavaScript?

I have a signup page that has links to 3 different pages. I want to preload all 3 of those destination pages while the user is still on the signup page. This way, the user does click it, it will load immediately.
Is it possible to do this using AJAX or an iframe and have the contents of the URL cached to by the browser?
Now chrome supports dns prefetching. But it is pretty new and not all browsers supporting it.
You can load all the resources(scripts, styles, images) in the upcoming pages in your signup page dynamically. In this way browsers will cache the resources. And, if you are using partial templates, you can preload that also.
This can be achieved with ajax.
On page load start loading the three pages, as soon as you receive each html file place them in three different hidden divs, when the user clicks a link hide the correct div. Remember to check what happens if the user clicks a link before you get your html back

Reload/Refresh IFrame without have a white flash?

I have a iFrame which loads many different pages, the initial load is always fine as i hide the IFrame until content is loaded then only do i display the IFrame.
My problem is now i have some pages which need to postback to grab information out the database dependent on what a user has on that page.
When this happens i get a white page while content is loaded. I cant hide the page as this would look worse then having a white loading page, i just need it to sit still with no flash while its drop down box populates.
I'm up for any solution using JS JQ or C# and my project is in ASP.
How i call my page refresh:
window.location.reload(true);
I call the refresh from inside the iFrame (Name: IFrameDam)
I am able to hid my IFrame from with in its self if this sparks any idea's:
$('#IFrameDam', window.parent.document).hide();
You can use Ajax request instead iframe and update the contents inside iframe parent div with id #IFrameDam and set the timer to resend ajax request and update without white screen. This behavior is same for almost any browser whereas iframe loads a whole new page inside current page leaving a blank space when not loaded.
here's how you can achieve this using ajax and jquery.
Just put iframe src path after "request_page" and refresh time after "time" variables.
Follow this link: http://jsbin.com/EYIKAnAb/1/edit?js

Categories