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

The 8 x 8 grid I am constructing is functional, however, the issue lies in the fact that the first line only begins with a single # symbol

I am attempting to create an 8 x 8 grid. It's coming together, but the issue is that the first line only starts with one # sign. function print(msg) { console.log(msg); return msg; } let result = ""; for(let i=1; i<=8; i++) { result += ...

javascripthtmlcss

Display the div only during the printing process

Imagine I have a situation where there is a block of content that I only want to show when printing. It looks something like this: <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div&g ...

javascripthtmlcss

python selenium style attribute for element

There is a snippet of HTML that resembles this: <a class="" data-style-name="Black" data-style-id="16360" "true" data-description="null"<img width="32" height="32" I am trying to extract the text "Black" from it and then click on it. However, there ...

pythonhtmlcssselenium

Leveraging real-time geographical location data for a weather widget with OpenWeatherAPI integration

My goal is to incorporate the current geolocation feature into a weather widget that I am developing. At the moment, I can only show data from cities based on an external source. My coding knowledge is quite limited. I am not a professional in this field, ...

javascriptwidgetcoffeescriptopenweathermapweather

Recording setInterval data in the console will display each number leading up to the current count

Currently, I am developing a progress bar that updates based on a counter over time. To achieve this, I opted to utilize a setInterval function which would update the counter every second, subsequently updating the progress bar. However, I encountered an ...

javascriptreactjscountersetinterval

Guide to retriecing a state in Next.js 14

Check out my code below: "useState" // firebase.js import firebase from "firebase/app"; import "firebase/auth"; // Import the authentication module export default async function handler(req, res) { if (req.method !== " ...

javascriptnext.js

Troubleshooting a jQuery filter function selector issue

Here's a function I've created: $.fn.filterByClass = function(cls) { var o = $(this); return o.filter(function() { if ($(this).attr("class") == cls) { return $(this); } }); }; Let's say we have multiple fo ...

javascriptjquery

Can Cell be rendered into a targeted element?

Can a Cell from CellJS be rendered into a specific HTML element? For example, including a Cell alongside some static HTML that is not managed by cell. Or having two separate Cell apps on a single page. <!DOCTYPE html> <html> <header> ...

javascriptcelljs

Locating a user by their ID within a collection in Meteor can lead to some unexpected behavior

I have a requirement where I only want to allow users to insert a document if their email is verified. In an attempt to achieve this, I wrote the following code snippet. Events.allow({ insert: function (userId, doc) { var user = Meteor.users.f ...

javascriptmongodbmeteor

Strange Behavior of SVG 'fill: url(#....)' in Firefox

I am struggling with an SVG graphic that I have created. Here is the code: <svg width='36' height='30'> <defs> <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" s ...

cssfirefoxsvggradientfill

PHP returns the result of form submission to JavaScript, allowing for distinction between successful and unsuccessful outcomes

JavaScript: $("#register-form").submit(function(event) { event.preventDefault(); $.post("./register.php", { username: $("#username").val(), password: $("#password").val(), passwordtwo: $("#passwordtwo").val(), email: $ ...

phpjavascriptjquerysqlajax

Data will not bind with Laravel and Vue

I am currently working on a Laravel project and trying to develop a basic editing feature for posts. My approach involves using Vue.js 2 to bind the data, but unfortunately, I am facing issues with displaying it - I'm not quite sure what's causin ...

javascriptphplaravelvue.js

Exploring the world of handling GET and POST parameters in Node.js with

As someone who is new to Node/Express, I've noticed that GET parameters can be captured using the following syntax: app.get('/log/:name', api.logfunc); For POST requests, it can be done like this: app.post('/log', ... (with for ...

javascriptnode.jsexpress

Having trouble with NVM not working correctly in Ubuntu 21.04 Terminal?

Lately, I've been facing challenges with updating my Node.js version, and one method I tried was using node version manager. After downloading the install_nvm.sh file with the command curl -sL https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/insta ...

javascriptnode.jsnpmnode-modulesnvm

React Native: Picker value remains static

I'm encountering an issue where the value of the picker does not change when I select a new value from it. This problem started occurring after I added the onValueChange function. If anyone has any insights or suggestions on how to resolve this, I wou ...

javascriptreactjstypescriptreact-native

Deploying an Angular application created using Yeoman to Heroku

I have been following some instructions on how to deploy my project, such as this guide or this tutorial. However, I am unable to get it to work properly. This is the code in my server.js file: var app, express, gzippo, morgan; gzippo = require('gz ...

javascriptangularjsherokugruntjsyeoman

Vue.js data does not exhibit reactivity

I am encountering an issue with a non-reactive data object nested inside another object in my Vue.js template. Here is the code snippet: <template> <div> <b-container class="bg-white text-center scrollBehavior" > ...

javascriptvue.js

The button fails to log any text to the developer console

Attempting to verify the functionality of my button by logging a message on the developer console. However, upon clicking the button, the text does not appear in the console. import { Component, EventEmitter, Input, Output } from '@angular/core'; ...

javascriptangulartypescript

Angular 4 incorporating a customized Bootstrap 4 accordion menu for seamless navigation

I am trying to implement a nested menu using a JSON object in Angular 4. Below is the code I have written. <div id="panel-group"> <div class="panel panel-default" *ngFor="let mainItem of objectKeys(my_menu); let i = index"> <div class ...

htmlangularbootstrap-4angular5angular2-routing

What is the best way to trigger a controller action when the datepicker's value changes?

Hello, I have a custom datepicker and I am trying to perform a calculation when the year is changed. The code provided below does not seem to work on onchange. I also attempted using the onchange attribute and calling a JavaScript function like this oncha ...

javascriptjqueryajaxgrailsdatepicker