We Keep Coding

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)
})

Send extra attribute from CKFinder to CKEditor 5

My goal is simple: I want to add extra attributes to an img tag in CKEditor; e.g.: <img src="path" data-attr="myattr">.
I built my Python connector; I added my upcast/downcast to CKE, but I still don't fully understand how to send the data-attr attribute from CKFinder to CKEditor.
Pipeline should be:
Click CKFinder
Select an image — this should contain an extra attribute: e.g.: data-attr
Add the image to CKEditor — the tag should contain the data-attr attribute
I can't figure how to do the last two steps. Any suggestions?

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

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.

Lazy loading of images while using angular dynamic ng-src

There are many image tags across the application and ng-src is dynamic in each image like:
<div ng-controller="load_product">
<img ng-controller="image_controller" ng-src="{{product.image}}" />
</div>
<div ng-controller="load_brand">
<img ng-controller="image_controller" ng-src="{{brand.image}}" />
</div>
Now I want to implement lazy loading of images using image_controller used on each image. For this, there are two events available in image_controller when image load or when error occurs on image loading using
$($element).load(function () {......})
$($element).error(function () {......}).
For lazy loading, my approach is to replace src of the image to a dummy 1px image if it is not in the viewport and store original src in another attribute lazysrc and change to original src if the image is in viewport i.e. copy value from lazysrc to src if the image in the viewport.
But for this i need a event when ng-src of image is resolved but request for image is not send by browser.
Note: load_product and load_brand controllers load the data after some events. So, I need to copy the src to lazysrc when data is loaded , ng-src is resolved but request of the image is not sent. I want to stop this request after data loading and ng-src resolved.
I don't want to change the HTML in any case as it is a thousand of pages application.

Display image when src attribute is a file not a url

I am using a content script in my chrome extension that gets the src attributes (from several images from the user's active tab) in order to display them in my popup HTML file that is displayed when a browser action is clicked. Certain images that I need to display use src values that are paths to local files.
Example:
src = "/image/17_x.px?wid=450&hei=500&bgcolor=xxx...etc"
the src starts with a "/", has a brief identifier denoted by "17_x", followed by various attributes of the image. Also itemprop = "image" is set on these image elements. The "xxxx...etc" is just showing that other attributes and values are listed in the src
When I create a new image element with this "local" src, the desired image is not displayed in my popup html file. Is there another way that I can use this image data to display the image within my extension?

Cause: element.getAttribute("src") or $(...).attr("src") return the original html markup.
Solution: use DOM property instead element.src or $(...)[0].src to return a full URL.