Extracting textual information from Wikipedia through iframes?

Currently, I am working on a website project utilizing Squarespace. This site will feature multiple pages dedicated to individuals who have reached a level of notability worthy of having their own Wikipedia page. With over 150 pages planned, manually writing out biographies for each person is proving to be extremely time-consuming. To streamline this process and ensure that the information remains up-to-date, I am exploring the option of pulling text directly from the introductory sections of these individuals' Wikipedia pages.

To illustrate my concept, I have outlined a basic format using Beyonce's Wikipedia article as an example. The following code snippet displays the Wikipedia page within an iframe element. Please note that the specific height and width values are arbitrary:

<iframe src="https://en.wikipedia.org/wiki/Beyoncé" height="551" width="705"></iframe>

This setup gives me:

<iframe src="https://en.wikipedia.org/wiki/Beyoncé" height="551" width="705"></iframe>

My main query pertains to extracting only the textual content from the Wikipedia pages while excluding images, sidebars, tables of contents, and other elements. This approach aims to maintain a visually consistent design across all pages on my website. Additionally, I am curious if iframes are the most suitable tool for achieving this goal.

Any suggestions or guidance on how to efficiently extract and display text-only content from Wikipedia pages would be greatly appreciated.

Thank you, K

javascripthtmlcssiframewikipedia

Answer №1

If you're looking to access information from Wikipedia, one effective method is utilizing the Wikipedia API. By making a request in JSON format to the API, you can retrieve specific data and then store it in your database for further use. JSON:

https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&titles=Beyonc%C3%A9

You can also view the same information in HTML representation of the JSON format:

https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exintro=&explaintext=&titles=Beyonc%C3%A9

For those interested in using an iframe, consider embedding a printer-friendly version of the Wikipedia article into the iframe.

<iframe src="https://en.wikipedia.org/w/index.php?title=Beyonc%C3%A9&printable=yes"></iframe>

Alternatively, you can employ AJAX to call the wiki API with customized query string parameters.

<!-- HTML -->
<div id="article"></div>

$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&page=Beyoncé&callback=?",
        contentType: "application/json; charset=utf-8",
        async: false,
        dataType: "json",
        success: function (data, textStatus, jqXHR) {

            var markup = data.parse.text["*"];
            var blurb = $('<div></div>').html(markup);
            $('#article').html($(blurb).find('p'));

        },
        error: function (errorMessage) {
        }
    });
});

This question on Stack Overflow provides more insights on the ajax method and there's a linked DEMO for reference.

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

Tips on updating Angular data model when a static HTML element changes

Currently, I am utilizing the editable-table jQuery plugin to enable editing in a table. This tool is simple to implement, lightweight, and highly efficient. The markup structure for this task looks like this: <tr ng-repeat="o in orders"> <td ...

javascriptangularjs

Incorporate an XNA game directly into a website

Is it possible to launch an XNA game directly from a web page without the need for any installations? Something along the lines of Java, Silverlight, or similar to WPF Browser Applications (XBAP). Situation: Visit a webpage, Prompted to install the g ...

browserxnahtml

Updating the innerHTML of a button with a specific id using Javascript is not possible due to it being "null."

My objective is to create a button that, when clicked, triggers a function to alter the styling of the HTML tag as well as the text or innerHTML of the button itself. Sounds simple enough, right? Unfortunately... The HTML: <!DOCTYPE html> <html& ...

javascripthtmlcssnull

Navigating between pages using the ExpressJS and Angular 1 routing system

Can someone help me troubleshoot an issue I'm having with my Express API and Angular front-end? Whenever I try to access the /about route, it keeps defaulting back to index.html and displaying a 404 error message. Can you take a look at my code and pi ...

htmlangularjsexpress

javascript Try again with async await

I am working with multiple asynchronous functions that send requests to a server. If an error occurs, they catch it and retry the function. These functions depend on data from the previous one, so they need to be executed sequentially. The issue I am facin ...

javascriptnode.jsasync-await

combine multiple keys into a single element with angular-translate

Within my application, I am retrieving translation keys from a single cell within a database table and dynamically displaying them on a settings page. While most entries will have just one key in the display object, there are some that contain multiple key ...

javascriptangularjstranslate

Tips on adding an image using Reactjs

I am currently working in Reactjs with the Next.js framework. I am attempting to upload images using Axios (POST method API) and will be utilizing an "api in PHP". Could someone please guide me on how to achieve this? I have tried the code below, but it&ap ...

javascriptreactjsnext.js

What is the reason behind my button appearing beneath my links in React?

Here is an image showcasing the current header render. The header consists of a HeaderMenu and 3 Links. While the links are functioning properly, the HeaderMenu is causing the links to be positioned below it. The HeaderMenu includes a div that wraps a Butt ...

javascripthtmlcssreactjsmaterial-ui

Resolving the issue: "How to fix the error "Credentials are not supported if the CORS header 'Access-Control-Allow-Origin' is '*' in React?"

Recently, I encountered some CORS issues while using a third party API in my front-end application. After reaching out to the API maintainers, they lifted the CORS control by adding a * to Access-Control-Allow-Origin, which seemed like the perfect solution ...

javascriptreactjsrestaxioscors

Using React Refs to Trigger the video.play() Method - A Step-by-Step Guide

Is there a way to use a ref in order to trigger video.play()? Currently encountering an error: preview.bundle.js:261916 Uncaught TypeError: _this2.videoRef.play is not a function Take a look at my component: import React from 'react'; import s ...

javascripthtmlreactjshtml5-video

JavaScript for controlling first-person movement with a mouse

Currently, I am working on implementing a first person movement feature using the mouse. While I have successfully implemented it using the keyboard, I am facing challenges with the mouse input. The issue arises from the ambiguity in movement directions ca ...

javascriptjquerycss

Conceal elements on smaller screens using the Bootstrap 5 grid system

I'm facing a design issue with my layout - it looks perfect on larger screens but when viewed on mobile devices, the columns stack vertically instead of horizontally. Essentially, I want to hide the first and second last column on small screens and r ...

htmlbootstrap-5

Best practice for incorporating Bootstrap into Webpack

Greetings everyone, I've been experimenting with Bootstrap for Webpack, but I've hit a roadblock. After reading numerous blog articles, I found that they either rely on the outdated 'bootstrap-webpack' plugin from 7 months ago (which d ...

javascripttwitter-bootstrapwebpackvue.jsbabeljs

Storing a collection of objects in session storage

I've been struggling to save an array containing the items in my online shopping cart. Even though both the object and the array are being filled correctly, when I check the sessionStorage, it shows an array with an empty object. I've spent a lot ...

javascriptjqueryjsonsession-storage

Accessing clipboard contents upon button click using TypeScript

Seeking assistance with retrieving data from the clipboard in TypeScript after clicking on a button. Please provide guidance. Thank you! ...

javascriptangularjstypescript

The construction was unsuccessful due to errors in the webpack process

I encountered a sudden error in my Next.js app. Is there any solution available to resolve this issue? ./pages/_app.tsx Error: [BABEL] C:\Projects\skribeNew\app-web\pages\_app.tsx: You provided us with a visitor for the node type T ...

javascriptreactjsnext.jsbabeljsnpm-package

Is it possible to pass an AngularJS ng-form object as a parameter in ng-if?

When I try to preview, the save button in my preview mode remains enabled. You can view the code snippet here: http://plnkr.co/edit/I3n29LHP2Yotiw8vkW0i I believe this issue arises because the form object (testAddForm) is not accessible within the ng-if s ...

javascriptangularjsformsangularjs-scopeangular-ng-if

Authenticate through Twitter when using PhoneGap Cordova

Looking to implement Twitter login in my application using JavaScript and HTML. How can I redirect users to the Twitter login page when they click on the "Sign In with Twitter" button? ...

javascriptandroidhtmlcordova

Converting lists to JSON format in a C# web form

Utilizing JSON.stringify, I have implemented textbox autocomplete for a web-form that suggests city names based on user input. The goal is to retrieve relevant city names from the database and display them as suggestions in the autocomplete feature after t ...

javascriptc#jqueryasp.netjson

Pass information submitted through a JavaScript prompt to an expressjs endpoint

I'm currently facing a challenge in extracting the value from my prompt in order to modify a category using a JavaScript function. Typically, I would rely on a form to pass variables to the request.body, but that's not an option here. This is wh ...

javascripthtmlnode.jsexpress