Display html from external site
Question
I want to create application to generate html code. What does this mean? I think example will be best here. I have created some html samles on my site. I would like to let user to display these samples on his/her site. For example user copy some link:
<script scr='some/path'></script>
If he will paste this script on his site then my compiled html code will show on his site. My question is how to do it most effective? I have never done something like this. Maybe you can give me some concept, tool which help me. I saw that in the past develepers solved these problem with iframe. But I think it isn't perfect solution.
2 answers
solution1
1 2015-01-21 14:52:14
If you want everything to look exactly the way you want, then there is no better solution than iframe .
The problem is that if you use some other solution (for example, using script from your site), then your CSS & JavaScript may conflict with the rest of the page, for example:
- Fonts will most probably be messed up;
- Background colors, links etc will also be potentially wrong.
If you really want to do it this way, then you should try reading something here: Embed an External Page Without an Iframe?
(I just googled "embed html other website javascript".)
Good luck!
solution2
0 2015-01-21 14:53:34
I think Eric Bidelman got what you need in his article "HTML imports", click on next link:
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
Include an import on your page by declaring a :
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
The URL of an import is called an import location. To load content from another domain, the import location needs to be CORS-enabled:
<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">
To detect support, check if .import exists on the element:
function supportsImports() {
return 'import' in document.createElement('link');
}
if (supportsImports()) {
// Good to go!
} else {
// Use other libraries/require systems to load files.
}
Browser support is still in the early days. Chrome 31 was the first browser to see an implementation. Since then, Chrome 36 was update with the latest spec. You can enable the flag by turning on Enable experimental Web Platform features in about:flags in Chrome Canary. For other browsers, Polymer's polyfill works great until things are widely supported.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.