I usually using an Iframe with src pointing to a HTML file containing an image:
Iframe
<iframe src="/image.html">
Image.html
<img src="/hello.jpg">
However, one time I accidentally used the image path in the Iframe
<iframe src="/hello.jpg">
And it still work perfectly. Is it a normal way to use this method? I am considering if there will be any inconsistent problem on different browsers / or does this method officially allowed in HTML.
Thanks.
Related
After reading the switch-to-iframe documentation, I am still not sure what will driver.getPageSource() return after driver.switchTo().frame(frame element) is called.
By Page source, I refer to the definition in
getPageSource(). But I can't find anything that confirm src's attribute is the same as page source. I think during the switching, webdriver will send a request to the src url and use the response to create a page source for the iframe, is it correct?
Is an iframe src's attribute the address for storing its page source? In here, it says
The src attribute specifies the address of the document to embed in an iframe.
(1) Anyway, let's say if we have an iframe like below
<iframe src="/video.mp4">
#document ----> may or may not exist, not sure if #document create by src or not
<html>
</html>
</iframe>
When the driver switch to this iframe,
Is the "/video.mp4"'s content use to create the iframe's page source (I think page source is the #document)? But this is a video file, how is it possible to use a video as page source (html)?
Or the page source is "/video.mp4"'s conetent + #document?
(2) What if the iframe has a html as src, such as
<iframe src="/file.html">
#document ----> may or may not exist, not sure if #document create by src or not
<html>
</html>
</iframe>
Does the page source become whatever is in file.html PLUS the #document in iframe?
Or the #document will only be created using the content from file.html after driver is switch?
(3) If the iframe has no src, such as
<iframe></iframe>
Can the iframe still has page source? What will getPageSource() return in this case after driver switch to this iframe?
getPageSource() gets the source of the last loaded page which is actually the source of the current page. The page source returned is a representation of the underlying HTML DOM.
Where as iframe is a construct which embeds a document into an HTML document so that embedded data is displayed inside a subwindow of the browser's window. This does not mean full inclusion and the two documents are independent, and both them are treated as complete documents, instead of treating one as part of the other.
The src attribute specifies the address of the document to embed in an iframe.
Syntax:
<iframe src="URL">
Attribute Values:
Value Description
URL Specifies the URL of the document to embed in the iframe.
Possible values:
An absolute URL - points to another web site (like src="http://www.example.com/default.htm")
A relative URL - points to a file within a web site (like src="default.htm")
This usecase
Considering the HTML:
<iframe src="/video.mp4">
#document ----> may or may not exist, not sure if #document create by src or not
<html>
</html>
</iframe>
Here video.mp4 is the file within the web site which will be embedded within the frame and you can access once you switch to the frame element.
Update
Once you switch to the desired iframe you can again use getPageSource() to extract the DOM Tree of the iframe element.
I am using an <object> tag to display document previews on my website.
Essentially, I pull out the document URL and type from my database, and give it to the <object> tag as follows:
<object data="url" type="type" width="100%" height="100%">
<p>Fallback in case the browser couldn't display the document</p>
</object>
Every time the user selects a different document, I just replace the two parameters on the same <object> tag (it's placed in a modal window).
Everything works fine, swapping documents works flawlessly, as long as the browser can render the documents (so, for example, moving from image/jpeg to application/pdf and back is fine).
However, as soon as one document cannot be rendered by the browser for any reason (e.g. the user doesn't have a PDF plugin), then all the following documents don't work either.
Is there any way I can reset the <object> tag, to be able to start showing documents again, without refreshing the page?
Otherwise, do you have any other suggestions to implement a document viewer other than with an <object> tag?
Thank you very much!
Solved by cloning the <object> element and injecting it into the DOM multiple times.
With jQuery:
var el = $("object");
el.clone().appendTo(el.closest("div"));
el.remove();
Thanks to #GuilhermeSilva for the input.
Can I do this so that I can run my web app within its website?
The app does not require webkit.
Will it require Javascript?
iFrame
The HTML iframe Element (or HTML inline frame element) represents a nested browsing context, effectively embedding another HTML page into the current page.
With iframes you can embed a web page inside another, so I think it will suit your needs.
Example:
<iframe src="a_web_page.html" width="300" height="300" style="margin-left:auto; margin-right:auto;">
<!-- The following is displayed if the browser doesn't
support iFrames (unlikely scenario nowadays). -->
<p>Your browser does not support iframes.</p>
</iframe>
The web page inside the iframe is in a separate context from the "host" page (the one including the iframe). Your JavaScript code should run okay inside the iframe.
I don't know what for you is diffrent between web app and website, but I think that iframe could be a solution for you.
I just switched the site from my working files to the server.
It worked fine when I uploaded it to my portfolio but once it was on the correct domain it stopped working. The image, instead of displaying, just shows up blank so I tried going to it's direct url.
Instead of it working it downloads the image instead of displaying it.
Here is the direct url: Direct url
My tag: <img src="images/login_header.svg" alt="Alright, lets start finding discounts!" />
My structure:
// root (BBCM)
//// images
////// login_header.svg
//// css
//// js
// end root
I have tried:
/images/url.svg
the direct url for the image
BBCM/images/url.svg
It works fine when it's on my portfolio but not on the correct domain.
Any ideas? When the image downloads it also displays the correct image so I am a bit lost here.
Is your server sending the .svg file down with the correct MIME type? It should be image/svg+xml.
See Nginx offers of downoload SVG instead of showing it for another question along the same lines.
Some browsers don't allow the IMG tag to support SVG files, you can however put it in an object with an image as fallback in case the browser fails to render.
<object data="image.svg" type="image/svg+xml">
<img src="fallbackimage.jpg" />
</object>
try use <object data="/images/login_header.svg" type="image/svg+xml"></object> instead
I have tried every method that I've read about to embed a youtube video into my HTML5, but it will not work in any browser. The best I get is a square that says the website cannot be found. I've tried using the old embed code, I've tried using the iframe...I've also tried using the new video tag...I've dumped each one of the codes into their own separate part (meaning not contained in a div or anything like that)...The only thing that it is contained in is the body itself...I've also tried the opposite by putting all three of these methods in some sort of container like a div. Not that being in one or not being in one should affect it's playability, but I'm trying everything...I don't understand why it just won't work
You aren't showing what you tried that didn't work, but I'm feeling psychic today so here's a wild stab:
YouTube is currently giving out embed links that look like this:
<iframe width="640" height="360"
src="//www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage"
frameborder="0" allowfullscreen></iframe>
What's unusual about this is that the URL -- in the "src" attribute of the IFrame tag -- does not specify a protocol.
The format of the src attribute above is a type of relative URL, called a protocol-relative URL, that allows the embed tag to work regardless of whether your page is being accessed with an http:// or https:// protocol. (You aren't allowed to mix these in a single page)
However -- and I'm guessing this is where you're going wrong -- if you open an HTML5 file locally, and not through a web server, it has a file:// URL. Because relative URLs -- including this oddball protocol-relative URL -- always take their unspecified bits from the current page location, the full URL that is being calculated is invalid:
file://www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage
To fix, just change the src attribute to specify the protocol, changing the relative URL into an absolute URL that works from a page served with both file:// and http:// protocols.
<iframe width="640" height="360"
src="http://www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage"
frameborder="0" allowfullscreen></iframe>
The drawback is that you can't put this on a page being delivered over https.
In the longer term you should get in the habit of testing from a real web server instead of a file URL. For a locally-installed test server, WAMP/MAMP is an easy and popular choice.