Jquery edits on webpage


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

Simple example:
1. Load this website:

2. Change background color to 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

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).

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.

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

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 :wink: