in vscode-extension webview(catcoding), i want load external webpage(like google,..),
i tried
panel.webview.html ="<html>
<meta http-equiv="refresh" content="0; url=http://www.google.com/"></meta>
</html>"
You can try to use iframe inside the webview. Just include this into the <body> element of the catcoding example:
<iframe src="http://dlabacov.cz" width="100%" height="400px">
</iframe>
Now, not sure if it important for you to render exactly google.com website, because that particular website (and many others) refuses to render in an iframe. This is why I used a website of my local cinema, which does not have such restrictions and I use it for such tests. So if you want to display a website that is under your control, perhaps you can setup the policies to allow it to be rendered in an iframe.
Google has the X-Frame-Options: response header set to SAMEORIGIN (X-Frame-Options: SAMEORIGIN) which notifies browsers if they are allowed to render the requested page inside <frame>, <iframe>, <embed> or <object> HTML elements, that are not hosted on the same domain.
Ref: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
But this can be bypassed/overridden by appending webhp?igu=1 to the end of the website URL. Like so, https://www.google.com/webhp?igu=1
Then you can use the iframe like this:
<iframe width="100%" height=650px" src="https://www.google.com/webhp?igu=1" title="Google">
</iframe>
The drawback will be that this may not work for every website, in that case you can check if the website you require works with iframes by checking for the header response on https://www.google.com & https://www.google.com/webhp?igu=1 with latter one not including any x-frame-options:
Related
I wanna learn how you guys can implement an embedded youtube video of personalize dimensions. I searched on Google "how to" and I tried some of the tips, but still not working. Can you help me ?
Create a new file index.html. Open it with your text editor (e.g., Notepad). Add the following to it:
<!DOCTYPE html>
<html>
<body>
<h1>My Embeded YouTube video</h1>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/bWPMSSsVdPk" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Change width="1280" and height="720" to the desired number of pixels. Change "https://www.youtube.com/embed/bWPMSSsVdPk" to whatever youtube video you want. For instance, if you'd like to change it to the following video: https://www.youtube.com/watch?v=ohr6O78jGzs
Just switch bWPMSSsVdPk to ohr6O78jGzs in the "https://www.youtube.com/embed/bWPMSSsVdPk" part, such that "https://www.youtube.com/embed/ohr6O78jGzs". Just note that not all videos are embeddable.
Open index.html with a browser. Just drag and drop it into the browser window.
Should do the trick.
I have an existing web application which I want to display inside my new application, so as to the complete application works inside the new application.
In the image i've attached google.com so on search of something is should show the result or even open the website.
I'm not sure how to achieve that.
One way I found is IFrame, so would I to know any other possibilities are their as I do want to use IFrame
Attaching an Image for an example
Thanks in advance.
Maybe you can use something like fancybox tools. http://fancyapps.com/fancybox/#examples
But usually these tools are also using iframes. Maybe you can find another way for fancybox.
edit:Embed an External Page Without an Iframe?
edit 2: did you try this?
http://www.felgall.com/noiframe.htm
<html>
<head>
<title>example</title>
</head>
<body>
Ilker Test
<br />
<!--[if lte IE 6]>
<object classid="CLSID:25336920-03F9-11CF-8FD0-00AA00686F13"
data="http://www.w3schools.com/html/html_examples.asp" style="height:800px; width:1200px; overflow:hidden;">
</object>
<![endif]-->
<!--[if gte IE 7]><!-->
<object type="text/html" data="http://www.w3schools.com/html/html_examples.asp"
style="height:800px; width:1200px;">
<p>Alternate text.</p>
</object>
<!--><![endif]-->
</object>
</body>
I have a simple view that I'm using to test out video.js; it looks like this:
<script type="text/javascript" src="~/Scripts/video.js"></script>
<link href="~/Content/video-js.css" rel="stylesheet" type="text/css">
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
<body>
<video id="testPlayer" class="video-js" controls preload="auto"
poster="~/Content/images/video-js.png"
data-setup="{}">
<source src="<url of a .mp4 file stored in my project>" type="video/mp4" />
</video>
</body>
After the page loads, I see the poster on the video player (along with some metadata information below the player that I haven't figured out how to get rid of yet). With preload="auto" I see ["Video Error", Object] immediately on page load in the console (using Chrome). If I change auto to none, I get the same non-descript error when I click the player. I cannot figure out what the problem with this error.
There doesn't seem to be any information tucked in the object that shows in the console. The best I could find, as far as description, was something that said media error. I've tried messing around with the encoding of the file a few different ways, but I consistently get the same error.
Does anyone see anything wrong with the view that I am missing (or know what in the world this error could mean)?
When specifying my source URL I was specifying it like this:
src="~/Content/something/place/etc.mp4"
Upon changing that URL to
src='#Url.Content("~Content/you/get/the/point.mp4")'
The video loads fine. I stumbled on some post that mentioned the video tag needing an absolute path, and took a stab trying this.
I have a very simple HTML two page demo that ilustrates a very confusing behavior in jQuery Mobile 1.1.0. (The real app is much more complicated but I've been able to "massively" simplify the problem.)
Page 1 consists of a single href to jump to Page 2. If Page 1 does NOT include jQuery Mobile 1.1.0 we can click on the link and Page 2 is displayed with no errors. However, if Page 1 includes jQuery Mobile 1.1.0, a click on the link in Page 1 results in a Page that is a combination of the HTML in Page 1 and Page 2! That is, Page 1 is retained and Page 2 is "merged" into it. I have tried this with both the regular and the minified versions with the same result. The two pages are as simple as an HTML page can get so it should be very easy to reproduce this with the samples below. This is running with Tomcat 5.5 (and if it matters, being managed and laumched out of Eclipse). The two HTML files and the two jQuery Mobile files are all placed in a folder at the server's document root. (The browser output below is from running through Tomcat, but I just tried this by launching the browser directly off of the Page1.html file - no server involved at all - and the problem persists, so this can be reproduced without a server being involved.)
The following shows the file contents for Page1 and Page 2, along with the HTML that is seen in the desktop Firefox browser (in Firebug).
* PAGE 1 SOURCE HTML:
<!doctype html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Remove jQuery Mobile and Page 2 is displayed properly. -->
<script src="jquery.mobile-1.1.0.min.js" ></script>
</head>
<body >
Click for Page 2
</body>
</html>
RESULTING PAGE 1 HTML IN THE BROWSER:
<html lang="en" class="ui-mobile"><head><base href="http://localhost/MyServer/DemoBadJQM/Page1.html">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
<title></title></head>
<body class="ui-mobile-viewport ui-overlay-c"><div data-role="page" data-url="/MyServer/DemoBadJQM/Page1.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 521px;">
Click for Page 2
</div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div></body></html>
PAGE 2 SOURCE HTML:
<!doctype html>
<html lang="en">
<head></head>
<body >
This is from PAGE 2 BODY!!!
</body>
</html>
RESULTING PAGE 2 HTML IN THE BROWSER:
<html lang="en" class="ui-mobile"><head><base href="http://localhost/MyServer/DemoBadJQM/Page2.html">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Remove jQuery Mobile and Page 2 is displayed properly. -->
<script src="jquery.mobile-1.1.0.js"></script>
<title></title></head>
<body class="ui-mobile-viewport ui-overlay-c ui-mobile-viewport-transitioning viewport-fade"><div data-role="page" data-url="/MyServer/DemoBadJQM/Page1.html" tabindex="0" class="ui-page ui-body-c ui-page-active fade out" style="min-height: 521px; height: 522px;">
Click for Page 2
</div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div><div data-role="page" data-url="/OpsServer/DemoBadJQM/Page2.html" data-external-page="true" tabindex="0" class="ui-page ui-body-c">
This is from PAGE 2 BODY!!!
</div></body></html>
Note that, with jQuery Mobile included in Page 1:
"Page 2", which had no content, contains the content of Page 1.
"Page 2" contains the href and the "loading" elements from Page 1.
"Page 2" finally includes the simple text from the in the Page 2 HTML file.
The page that results from clicking the link in Page 1 appears to be Page 1 with Page 2's appended. Drop jQuery Mobile from Page 1 and the problem is gone. It is purely a guess, but jQuery Mobile displays a "loading" message while the next page is being fetched and it appears that the act of doing this somehow prevents the browser from "disposing" of Page 1 and it instead merges the incoming Page 2 with the prior Page 1.
Can anyone explain what is happening here?
Thanks.
Using rel="external" along with the href in Page 1 fixes this problem.
This may be out dated but I just ran in to something similar. It looks like the reason is because jQuery Mobile will fetch the page, load it into the DOM, then transition between the pages like a slide. I'm assuming your viewable area was enough to hold the pages in such a way that it didn't even try to slide between the pages.
Our situation was that we had some pages with jQuery Mobile explicitly loaded and some without, and the ones with out were somehow getting the Mobile library's functions.
jQM loads itself and other pages into memory so that it can reduce the number of network requests and also to be able to transition nicely between pages. You can also tell it to preload images and pages in the background after you load your first page.
It's a slightly different beast than just regular html pages. Just try and think about optimizing the site for as few network requests as possible.
http://jquerymobile.com/demos/1.0b2/docs/pages/page-cache.html#/demos/1.0b2/docs/pages/page-anatomy.html
Can someone tell me how to stop IE8 printing the value of the href for an A tag next to the text. For example this markup
Some Link
When printed comes out as
Some Link(/site/page.html)
when printed. How can I stop this?
This doesn't happen for me in IE8 and I've never spotted it. I also can't find it in the Internet Options anywhere.
It is possible that you have some software on your computer that does this, for example AVG Anti-Virus adds content to web pages to tell you that it has checked the links being displayed for potentially harmful content - so your system-security software may be expanding all links to show you where they actually point, to prevent phishing attacks.
If you do have some anti-phishing software on your machine, you'll have to find the option within that.
Update - It is almost certainly some clever CSS.
I have created the following test page to demonstrate how you can add the URL to a link using CSS generated content. If this was used within a print stylesheet, this would explain how the URL is getting added to the link when you are printing the page. To stop this, you would have to save a copy of the web page, remove the style rule from the print-only style sheet and then open your copy and print it!
<html>
<head>
<title>Test</title>
<style type="text/css">
a:after {
content: " [" attr(href) "] ";
}
</style>
</head>
<body>
<h1>Test</h1>
<p>This is a test to see if this
Link Shows A URL</p>
</body>
</html>