Jquery edits on webpage


#1

Hi

I would like to show a webpage in a Xibo Layout and make some adjustments on it.

Simple example:
1. Load this website:
https://miras.be/lokaal_bezetting_lijst/24/2019-05-02/06:00/23:00

2. Change background color to black
$(‘body’).css(‘background-color’,‘black’);

This is what I’ve tried:

Off course the Jquery edits I’d like to make are some other (usefull) things, but I’ve done this example to keep it simple.

Thanks in advance
Laurent


#2

It can not be done with embedded web pages, the web page must be located in client device.
See more about Same Origin Policy
An origin is defined by the scheme, host, and port of a URL. Generally speaking, documents retrieved from distinct origins are isolated from each other. For example, if a document retrieved from http://example.com/doc.html tries to access the DOM of a document retrieved from https://example.com/target.html, the user agent will disallow access because the origin of the first document, (http, example.com, 80), does not match the origin of the second document (https, example.com, 443).
https://www.w3.org/Security/wiki/Same_Origin_Policy

That can be achieved using a php scraper.

  1. Create a php file in your server
  2. Create a html file in your server
  3. Edit php file:
  1. It’s a good idea to create a crontab for generate YourHtmlFile.html.

See more: https://crontab.guru
5. Adapt the code to your needs (save images, css etc.)
6. Add YourHtmlFile.html in Xibo Layout.


#3

Hi! Thank you for your help. I’ll try it next week.
Good Weekend!