There was a need to import content from another site. On the server of another site, I allowed content to be received by my site, through Access-Control-Allow-Headers , in order to make it possible to receive content from there. On your page did the following:

 <header class="header"> <link rel="import" href="http://стороннийсайт/" /> </header>

The script itself, which appends the received content from a third-party site:

 <script type="text/javascript"> $(document).ready(function() { var link = document.querySelector('link[rel="import"]'); var content = link.import; if (content != null) { var el = content.querySelector('.header'); document.getElementsByTagName('header')[0].appendChild(el.cloneNode(true)); } }); </script>

Yes, from another site I take the leader, which is a menu with several links. What is the result that does not suit me:

  1. The image from the received content does not pull up
  2. Embedded content links change

Accordingly, I have two questions:

  1. How to upload an image from another site to yours?
  2. How to make the right link?

Explanations for the second issue:

If you go to a third-party site page, then it has links of the following format:

http: // third party / other / first
http: // third party / other / two
http: // third party / about

After I get the content from a third-party site and embed it in my own, the links change:

http: // mysite / other / first
http: // mysite / other / two
http: // mysite / about

I need the links to not change, but remain the same as on a third-party site.

  • Most likely the links that you are trying to get are given via a relative path. It’s only to manually add the path, considering that you know the address from where you take it, should not be a problem (or I misunderstand something) - Vasily Barbashev
  • @ Vasily Barbashev, I certainly can go through the received content and change the path to the one I need, but I think that here you can not reinvent the wheel, but something somewhere to finish and I will be happy. And what about the picture? - Denis Bubnov
  • @ Vasily Barbashev, although apparently you can't do without a bicycle, you are right, the relative path is indicated. Here's a pancake - Denis Bubnov
  • I made a mistake and deleted the comment, I will try to conjure it locally - Vasily Barbashev
  • I tried it locally, through the template, if the path is specified correctly (relative to where you take it), then the picture is loaded. I do not know how suitable this option is (taken from html5rocks.com/en/tutorials/webcomponents/imports Including templates) - Vasily Barbashev

1 answer 1

The script for receiving site content must be supplemented with the following code:

 var link = document.querySelector('link[rel="import"]'); // Clone the <template> in the import. var template = link.import.getElementById('someData'); var clone = document.importNode(template, true); var linksList = clone.querySelectorAll('img'); // или `a` linksList.forEach((lnk) => { lnk.setAttribute( 'src', // или href, для`a` 'https: //ссылка которую надо вставить' + lnk.getAttribute('src') // или href, для`a` ); }); document.querySelector('#root').appendChild(clone);

Sample code from the file / address of the site from which we are loading the content:

 <div id="someData"> <h1>Hello World!</h1> <!-- Img is not requested until the <template> goes live. --> <img src="/assets/logo.png"> </div> ...
  • Yeah, I saw, roughly understood from the comments, but it is more convenient. Thanks, I’m currently signing up) - Denis Bubnov
  • Thank! This is what you need, now everything is as I need it :-) - Denis Bubnov
  • one
    @DenisBubnov always please, colleague :) - Vasily Barbashev