I know that there's a meta tag to change the page's resources' incompleted URLs.
For example:
If I were to load a JS file using a <script> tag to get the file main.js, then the page would auto-complete the src from "./main.js" to "https://example.com/main.js"
<!-- This file is hosted on https://example.com -->
<script src="./main.js"></script><!-- will load https://example.com/main.js -->
But when you add the meta tag that I've talked about previously and set it to auto-complete with "https://example2.com" and tried to load the same JS file in "https://example.com" the website would load the file from "https://example2.com"
<!-- This file is hosted on https://example.com -->
<meta name="..." url="https://example2.com">
<script src="./main.js"></script><!-- will load https://example2.com/main.js -->
What's the name of that meta tag? And, if what I said wasn't true, is there any other way to achieve the same behavior?
I don't think that a meta tag like this exists. It's less that the browser 'auto-completes' links, but more that it converts relative links to absolute ones to display them in the console.
Usually, accessing scripts from another domain is quite rare, by which I mean it only occurs once or twice on a page. For only a few instances, I would just use the full URL https://example2.com in my src attributes.
If you needed the domain to remain variable, or have very many instances of it, you could use PHP. At the top of your page, specify a variable $sourceURL:
<?php $sourceURL = 'https://example2.com' ?>
And then reference this variable in your src attributes, eg. :
<script src="<?php echo($sourceURL) ?>/main.js"></script>
Related
I am using Vuejs and I need to insert script tags in the DOM dynaically to embed JWPlayer videos in this way:
<body>
<!-- HTML content -->
<script src="//content.jwplatform.com/players/KZVKrkFS-RcvCLj33.js"></script>
<!-- More HTML content -->
<script src="//content.jwplatform.com/players/ANOTHER-ID-ANOTHER-PLAYERID.js"></script>
</body>
I have used without results: v-html directive to render the html tags. As well v-bind:src but neither execute the code. I found this solution but it did not work either: How to add external JS scripts to VueJS Components
I used this solution but the script tags (one for each video) must be inserted in the body (not in head): they should create div tags containers and embed the videos. The problem is that the embeded JWPlayer file contains a document.write() statement. And the browser console says: "A call to document.write() from an asynchronously-loaded external script was ignored."
Is there anyway to achieve this?
The link you provided should work.
You probably just need to wait for the script to load before you can use JWPlayer.
const script = document.createElement('script')
script.onload = () => {
// Now you can use JWPlayer in here
}
script.src = '//content.jwplatform.com/players/MEDIAID-PLAYERID.js'
document.head.appendChild(script)
Also make sure you only do this one time for the first component that requires it, from that point onward JWPlayer will be loaded and you can use it without inserting another script tag.
<!--#include virtual="filename.htm"-->
Currently, I don't see include file (html) content when I open page in browser.
You use virtual= if the file you are calling for is in a different directory from the page which is calling for it.
Otherwise you use file=.
Rule of Thumb
Use file= when the included file is within the same directory as
the page that wants it.
<!--#include file="included.html" -->
Use virtual= when it isn't.
<!--#include virtual="/directory/included.html" -->
That forward slash before the first directory is representative of the
domain name (server root). By using that leading slash, the server
will add the domain name to the front of the address for you.
Source: http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341
Additional Notes...
Perl-based Server Side Includes (SSI) of the format:
<!--#include virtual="/directory/included.html" -->
are not the only type of SSI you can deploy.
Alternatives include:
1) ASP Includes (for Windows-based servers):
<!-- #include virtual ="/directory/included.html" -->
2) PHP Includes (for Linux-based servers):
<?php include '[...SERVER_PATH...]/directory/included.html'; ?>
3) HTML Imports (Becoming more widely available...)
<link rel="import" href="/directory/included.html">
N.B. HTML Imports work slightly differently to the other 3 types of include, given that they are only declared in the <head> of a page (not in the <body>) and once loaded, are intended to be manipulated within the DOM via Javascript...
I am wrapping a razor view in an iframe. The razor view is a web service on a different domain.
Here is what I am doing:
<!DOCTYPE html>
<html>
<body>
<p align="center">
<img src="http://somewhere.com/images/double2.jpg" />
</p>
<p align="center">
<iframe src="https://secure.somewhereelse.com/MyPortal?CorpID=12334D-4C12-450D-ACB1-7372B9D17C22" width="550" height="600" style="float:middle">
<p>Your browser does not support iframes.</p>
</iframe>
</p>
</body>
</html>
This is the header of the src site:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/cupertino/jquery-ui-1.8.21.custom.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
</head>
I want the iframe src to use the CSS of the calling site.
Is there a way to pass in the CSS URL or have it inherit the CSS of the calling site?
I'd even settle for the css file location being a parameter being passed in from the originating site.
Anyone have any suggestions?
You cannot enforce your css on your site using an iframe. The css must be included in the source of the page included in an iframe. It used to be possible but in certain cases using javascript, and for the page to be on the same domain.
The only other way you may be able to use your own css is if the web service allows you to pass in the url of the css. But you would have to consult the documentation of the web service to find that out.
I would pass the CSS url as an argument to the iframe's src attribute:
<iframe src="http://somedomain.com/?styleUrl=#(ResolveStyleUrl())"></iframe>
Where ResolveStyleUrl might be defined as:
#functions {
public IHtmlString ResolveStyleUrl()
{
string url = Url.Content("~/Content/site.css");
string host = "http" + (Request.IsSecureConnection ? "s" : "") + "//" + Request.Url.Host + url;
return Raw(url);
}
}
This is of course assuming that the domain would accept a style url query string and render the appropriate <link /> on the remote page?
Eroc, I am sorry you cannot enforce your css on others' site using an iframe because most browsers will give an error like the one chrome gives:
Unsafe JavaScript attempt to access frame with URL http://terenceford.com/catalog/index.php? from frame with URL http://www.example.com/example.php. Domains, protocols and ports must match.
But this does not mean that you cannot extract the html from that page (which may be modified as per your ease)
http://php.net/manual/en/book.curl.php can be used for site scrapping with http://simplehtmldom.sourceforge.net/
First play with these functions:
curl_init();
curl_setopt();
curl_exec();
curl_close();
and then parse the html.
After trying yourself, you can look at this example below that I made for parsing beemp3 content, when I wanted to create a rich tool for directly downloading songs, unfortunately I couldn't because of the captcha but it is useful for you
directory structure
C:\wamp\www\try
-- simple_html_dom.php
-- try.php
try.php:
<?php
/*integrate results for dif websites seperately*/
require_once('simple_html_dom.php');
$q='eminem';
$mp3sites=array('http://www.beemp3.com/');
$ch=curl_init("{$mp3sites[0]}index.php?q={$q}&st=all");
curl_setopt($ch,CURLOPT_HEADER,0);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
//curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
$result=curl_exec($ch);
curl_close($ch);
$html=str_get_html("{$result}");
$ret = $html->find("a");
echo "<head><style type='text/css'>a:link,a{font-size:16px;font-weight:bold;font-family:helvetica;text-decoration:none;color:#458;}a:hover{color:#67b;text-decoration:underline;}a:visited{color:silver;}</style></head>";
$unik=array(null);
foreach($ret as $link)
{
$find="/(.{1,})(\.php)[?](file=.{1,})&song=(.{1,})/i";
$replace="$4";
if(preg_match("{$find}",$link->href))
{
$unik[]=$link->href;
if(current($unik)===prev($unik)){unset($unik);}
else{
echo "<a href='".$mp3sites[0].$link->href."'>".urldecode(preg_replace($find,$replace,$mp3sites[0].$link->href))."</a><br/>";
}}
}
?>
I know that you do not code in php, but I think you are capable of translating the code. Look at this:
php to C# converter
I spent time on this question because only I can understand what it means to offer bounty.
May be the answer seems unrelated (because I have not used javascript or html based solution), but because of cross-domain issues this is an important lesson for you. I hope that you find similar libraries in c#. Best of luck
The only way I know to achieve that is to make the HTTP request on your server side, fetch the result and hand it back to the user.
A minima, you'll need either to strip completely the header from the targeted site to inject the content in your page using AJAX, or to inject your own css in the page headers to put it into an IFRAME.
Either way you have to implement the proxy method, which will take the targetted URL as an argument.
This technique has many downsides :
You have to do the queries on you server, which can cost a lot of bandwidth and CPU
You have to implement the proxy
You cannot transmit the domain specific cookies from the user, though you can manage new cookies have by rewriting them
If you do a lot of requests you server(s) is/are likely to become blacklisted on the targeted website(s)
The benefits sound low compared to the hassles.
I have a page which by default has a plain looking theme. In order to swap between one of 5 themes the url parameter agency=x where is the name of the theme must set.
So if the default url of my page was
http://127.0.0.1:8888/index.html?&some.param=123&someother.param=321
I need to have a url that would link to
http://127.0.0.1:8888/index.html?&some.param=123&someotherparam=321&agency=2
Keep in mind that some.param and someother.param are arbitrary, users could hit this page with all sorts of crazy get params, I just need to (if possible) link to itself with the addtional get parameter.
I can always render this out dynamically via a servlet or jsp but if there is a way to do this with standard links/hrefs it would be much better.
Any ideas?
It's a bit of both, but I would do, in the <head> element:
<link rel="stylesheet" type="text/css" href="agency<%= the agency %>.css" />
And have agency.css for the default, agency1.css for theme 1 and so on.
You could do this with javascript.
On all hrefs add an onclick callback (using document.getElementsByTagName('a')) which parses window.location and adds it to the href on the fly.
I want to call one html page fron another in a div.
I tried using
<include file="NavigationTree.html" />
and
<? include("/starfix/pages/NavigationTree.html"); ?>
But it doesn't work.
Am I doing something wrong or do i need to do it some other way?
You may want to consider using Server Side Includes (SSI).
You would place your HTML snippet into a separate file, such as NavigationTree.html, and then you would simply reference it in your web pages by using:
<!--#include virtual="NavigationTree.html" -->
SSI is supported by all the popular web servers, including Apache, IIS and lighttpd.
Note that if you are using a shared host, you may have to use the .shtml, .stm, or .shtm extension for SSI to work. If you have root access to your web server, it can be easily configured to enable SSI for any extension, including html.
This is not possible in pure HTML.
The former is a notation I have never seen before, it is not HTML, maybe it works in some specific server-side templating language.
The latter is PHP. It should work but you need to bear in mind include() works with absolute paths inside the server's file system.
You should specify a relative path:
<? include("./NavigationTree.html"); // will work if it's in the same directory ?>
or an absolute one that will probably look something like this:
<? include("/path/to/your/www/dir/starfix/pages/NavigationTree.html"); ?>
(ask your admin for the absolute path to your web root)
You can maybe also do a HTTP include:
but that's unwise because it tends to be slow, and generates a second request on each page request.
You can also use SSI as outlined by #Daniel.
You could also use jQuery for this,
e.g.
<div id="yourDiv" />
<script>
$("#yourDiv").load("NameOfYourPageToReadFrom.ext #NameOfDivToReadFrom");
</script>
This puts the contents of the 'NameOfDivToReadFrom' DIV in the called file ''NameOfYourPageToReadFrom' into the loaded DIV ('yourDiv') in your current file.
Remember to add the definition to the header part of your html.
e.g.
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
You can use an iframe for that, e.g.:
<iframe width="500" height="300" frameborder="no" scrolling="no" marginheight="0" marginwidth="0"
src="http://www.example.com/page.html"></iframe>