Jquery edits on webpage

Laurent_Veys · May 15, 2019, 2:12pm

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

Jonatan · May 16, 2019, 10:41pm

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).
Same Origin Policy - Web Security

That can be achieved using a php scraper.

Create a php file in your server
Create a html file in your server
Edit php file:

<?php 
$html = file_get_contents('https://www.miras.be/lokaal_bezetting_lijst/24/2019-05-02/06:00/23:00'); 
$page = str_replace('<body>','<body style="background-color:red">',$html);
file_put_contents('YourHtmlFile.html', $page );


?>

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.

Laurent_Veys · May 17, 2019, 2:07pm

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

dan · May 22, 2019, 10:29am

Jonatan is right that CORS will be a problem for you, but the actual root cause of your issue is that your command to navigate to a new web page means that you JS doesn’t exist anymore. If you put your target webpage in a frame instead, you might be able to address it with your own JS, depending on its CORS settings.

Scraping a web page with PHP gets complicated with complex pages - all of the resources will still refer to the original site, and they may refuse to serve those if embedded in your web page.

In any case please make sure you have the rights to do what you’re trying to do before hand