Show the path of an iFrame element inside of a separate container - javascript

The issue
I have the following iframe in my webpage.
<iframe id="videobox" width="270" height="410" src="/videochat" marginwidth="0" margin="0" scrolling="no" ></iframe>
I would like to show the src value of this iframe in another HTML element.
<div id="iframeurl">iframe url https://abcded.com/videochat/#abcd12345</div>
The end of the URL, which is the hash, is dynamically generated when visiting the iframe URL. This means that taking the initial src value will not include the dynamically generated URL.
Problem
The problem is that taking the src value from the iframe only shows https://abcded.com/videochat/. I need the URL with the dynamicly generated hash at the end, like https://abcded.com/videochat/#abcd12345
What I need
I need the full iframe url inside an <a> element like
Click to open the embed in a new tab.
or
I need to show the iframe URL inside of a seperate <div> element. For example, <div id="iframeurl">The URL is: https://abcded.com/videochat/#abcd12345</div>

You can get the current iframe URL through .contentWindow.location.href. Here is an example.
document.getElementById("videobox").contentWindow.location.href;
To display this in a separate element, set it's .innerhtml value to the URL plus any other relevant text.
document.getElementById("iframeurl").innerHTML = "The URL is: " + document.getElementById("iframe_id").contentWindow.location.href;
To make an <a> tag with the URL, use this code.
document.getElelemtById("iframelink").href = document.getElementById("iframe_id").contentWindow.location.href;
Don't forget to update the JavaScript code once the iframe is loaded after a certain period of time, otherwise it may not pull the correct value and pull the link before it redirects.

Related

Change Iframe src based on user input

I can't seem to find anything that works, but I need some html that makes an iframe based on what url entered into a text box. I use iframes to unblock websites on my school chromebook but its a hassle if I want to just check a website and see how it works on an iframe by making a whole new website. I just wanted something to easily preview a URL in an iframe.
In order to change the iframe source, you'd need a listener for when the input changes and when it does, change the source of the iframe by updating the src property. Setting up the listener, you could do something like this:
// Grab the element by ID
document.getElementById("example_input")
// Add the event listener to "input"
.addEventListener("input", exampleFunc);
function exampleFunc(event){
// Grab iframe by ID
let iframe = document.getElementById("example");
// Update the source
// First grab the input that was typed into
let input = event.target;
// Next get the value of that input
let newUrl = input.value;
// Now update the "src" property of the iframe
iframe.src = newUrl;
}
<html>
<head></head>
<body>
<input type="url" value="https://example.com" id="example_input">
<iframe id="example" src="https://example.com" width="1000" height="450" frameborder="0" scrolling="no"></iframe>
</body>
</html>
Although in this case, you may not want to update it every input but rather when a user stops typing, which has a solution in this question.
Please also note that many websites will not allow for iframes to make connections for various reasons (X-Frame-Options header, Content Security Policies, etc.), with examples of sites that won't work being Google and YouTube.

Get image src through jQuery .load()?

so I just had a quick question about jQuery .load().
Is there a way I can load the 'src' field of a div on another page into a variable on my current page? So if it is:
<div class="test"> <img class ="image" src="imagelink">
I would like to get the imagelink in my current HTML page using JS / jQuery. I've tried doing ${#loadhere}.load("URL .image") as per the documentation https://api.jquery.com/load/ but it doesn't seem to get me the image link. My plan is to get the link and then $(#loadhere).attr('src', LINK) as per this SO post: jquery changing image src
If all you want is to parse something from another page using $.get() would be more practical as it won't insert anything into the current page unless you want to yourself.
You can wrap the response html in $() and maniplate or query that html the same as you would do in the current page
$.get('otherPage.html').then(function(res){
const src = $(res).find('.test .image').attr('src');
$('#currentPageImage').attr('src', src)
})

TinyMCE image custom hash

I'm working with TinyMCE editor with some old webpage content.
All HTML content could contain "links" to images in format ".. <img src="##IMAGE:1234##"/> ..".
I need to show image in HTML preview, but in code it has to stay in format "..<img src="##IMAGE:1234##"/>.."
I know URL to download/inline all images =>
http://example.com/images/1234
Do I need to parse editor content, replace IMG src by URL + ID from original IMG src (##IMAGE:1234##).
Is there some way, how to have in HTML code mode something like this "..<img src="##IMAGE:1234##"/>..", but in preview mode have image displayed?
Thanks
TinyMCE relies on the browser to render the HTML that you give to the editor. As the current src you are providing is not valid the image won't show.
What I would suggest is to use a data-xxx to store the value you need and programmatically set the src attribute when you place the content into the editor.
For example...
You might store the image tag in your database as <img data-imgsrc="##IMAGE:1234##" />. When you get ready to load the content into the editor add the src attribute to the image tag so you end up with <img data-imgsrc="##IMAGE:1234##" src='http://example.com/images/1234' />. This allows the editor to render the images.
When you go to save the HTML content back to the database you can remove the src attribute from any image that also has the data-imgsrc attribute (assuming you need to do this for some reason).

How to replace the contents of a page with an iframe containing the contents of the page?

I am trying to create a chrome extension that places the contents of the current page into one iframe, and the contents of another page into another iframe, and show them side-by-side (both iframes are width:50%;float:left).
What I've got is:
var h = jQuery('html');
h.html('<iframe src="data:text/html;charset=utf-8,' + escape(h.html()) + '" style="width:50%; float:left;"></iframe><iframe src="...');
My problem is it is not rendering css or loading the js.
As a stop-gap I am setting the src attribute as the location.href, but that is only doing a GET of the current page, the contents of which may change on POST.
How do I get the iframe to render the css and js?
This issue is due to the resources of the iframe being unable to work out what the host is. As such, because my references are all relative, they could not work out the full path. I.e. I have set the src of the iframe to a string of HTML, and the css path is similar to /css/styles.css - it cannot resolve /css/styles.css relative to the string of HTML.
The solution is add a <base href="" /> tag to the head of the HTML:
h.find('head').prepend('<base href="'+location.origin+'"/>');
The full script now looks like:
var h = jQuery('html');
h.find('head').prepend('<base href="'+location.origin+'"/>');
h.html('<iframe src="data:text/html;charset=utf-8,' + escape(h.html()) + '" style="width:50%; float:left;"></iframe><iframe src="...');
The base tag is telling all the relative urls to prepend the href attribute to themselves; i.e. turn the relative css url from /css/styles.css to http://example.com/css/styles.css

How can you load an external web page into an Iframe with Jquery with Custom variables?

Can you load a page into an iframe with JQuery? I have a page that creates a custom printable pdf and need it to load into an iframe to make it easier for the user. I use jquery to pull in all the variables otherwise I could have it load within the page. I am not sure what I am missing with this command to load the page within id="print_form_modal2"?
$.frameReady(function(){
$("#print_form").prepend('<div id="newDiv"></div>');
$('#newDiv').load("print_audit.php?auditID="+auditID+"&action=print&print_name="+print_name+"&print_orient="+print_orient+"&download_option="+download_option+"&type=pdf");
}));
<iframe id="print_form_modal2" name="iFrame" src="">
You could do it the painless way and just use HTML:
Make an <a>nchor with the href to your PDF.
Add an iframe with a name attribute (ex. name="iframe1")
Next, add a target="iframe1" to the <a>.
PLUNKER
Its simple enough to do what you're trying to do using just JavaScript and HTML
HTML:
<iframe id="print_form_modal2" name="iFrame">
JavaScript:
function openIframe() {
document.getElementById("print_form_modal2").setAttribute("src", "https://www.example.com/");
}
You can see the code in a CodePen here: http://codepen.io/anon/pen/VjbBbY
In your code you need to replace https://www.example.com/ with the source path for PDF you wish to display, and change when openIframe is called to suit your requirements.
Here's a link to the codepen example
What you want to do on document ready (or whatever event is relevant to your logic) get the iframe and using the attr method change its source property to point to whatever new/old source.
Like this:
$(document).ready(function() {
$('#iframe-container').attr('src','http://www.w3schools.com/tags/tag_iframe.asp');
});

Categories