How to get hyperlink inside iframe - html

Lets say this is index.html
<html>
...
<iframe id="targetid" src="link.com"><iframe>
...
</html>
and this is link.com
<html>
...
<div class="name" href="http://I_need_this.com">blablbalba<div>
I want to get "http://I_need_this.com"

You can use the methods below:
var div = document.GetElementByClass("name");
var link = div.href;
Or:
var iframe = document.GetElementById("targetid");
var link = iframe.src;

Related

How to include an image in HTML without showing it on screen

I want to show an image on an HTML5 canvas without putting it on screen first. I've tried <noscript> but that doesn't work as then I can't include the image into my code.
Here's my HTML:
<html>
<noscript>
<img id = "tiles" src="img/tiles.png">
</noscript>
<title>Super Mario World</title>
<head>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script src="sketch.js"></script>
</body>
</html>
Here's my javascript:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var _img = document.getElementById('id1');
var newImg = new Image().src = _img;
context.drawImage(newImg,0,0);
<img id = "tiles" src="img/tiles.png" style="display:none;">
then to display it
document.getElementById("tiles").style.display = "block";
EDIT:
That was a quick answer to the question but, a far better approach would be to create a class
.hidden {
display : none;
}
then add it to elements.
<img id = "tiles" src="img/tiles.png" class="hidden">
and remove it to display
var element = document.getElementById("tiles");
element.classList.remove("hidden");
The reasoning behind this is that if the original display wasn't block, this would create issues, also it is generally discouraged to use inline style.

Replacing iframe source with main URL

I am not sure if this is possible or not...
I am trying to replace a specific part of a URL from my iframe with a string that is part of the mainframe's URL.
i.e. I am trying to replace the iframe link to include the userID.
Main URL: https://web.example.com?userID=9553c6
<iframe src="https://app.example.com?[Insert userID here]"></iframe>
If your site where is content under address https://web.example.com?userID=9553c6 in my opinion you can do this using eg. php
<body>
<iframe src="http://example.com?user_id=<?php echo urlencode($_GET['userId']) ?>"></iframe>
</body>
Then variable $_GET['userId'] will have value of 9553c6
Or you can use only js which will be a bit harder, because you have to parse location.search https://www.w3schools.com/jsref/prop_loc_search.asp and get specific part of it. Of course this value of param userId will be from main site.
Direct solution
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
iframe {
width: 100%;
height: 1000px;
}
</style>
</head>
<body>
<iframe src="http://fotokrajobrazy.warmia.pl/galeria/fota.php?nr=1004"></iframe>
</body>
<script>
window.onload = function () {
var res = location.search.match(/userId\=(\w+)/);
var fr = document.getElementsByTagName('iframe')[0];
fr.setAttribute('src', fr.getAttribute('src').replace(/(nr\=)\d+/, '$1'+res[1]));
};
</script>
</html>
You can then edit main url like this:
http://127.0.0.1/stack.html?userId=1003
and
http://127.0.0.1/stack.html?userId=1002
etc. and the url of iframe will change too.
You need some simple string-hangling.
You say you're injecting the frame via JavaScript, so I'll suppose your code looks something like this.
let
ifr = document.createElement('iframe'),
src = 'some/url/here?user={user-id}',
user_id = '123456';
src = src.replace('{user-id}', user_id)
;
document.body.appendChild(ifr);
The key line is the one with .replace() - that's where we replace the placeholder with the actual value.

HTML how to get tag arguments

My English is weak so I give an example.
I want something like that
<!DOCTYPE html>
<html>
<head>
<title>MySite</title>
</head>
<body>
<div id="mydiv" testarg="teststring"></div>
<script>
var element = document.getElementById("mydiv");
var argstring = getArgument(element,"testarg");
</script>
</body>
</html>
You could use getAttribute to get an attribute's value, and setAttribute to set it (change it):
<!DOCTYPE html>
<html>
<head>
<title>MySite</title>
</head>
<body>
<div id="mydiv" testarg="teststring"></div>
<script>
var element = document.getElementById("mydiv");
var argstring = element.getAttribute('testarg');
console.log(argstring);
element.setAttribute('testarg', 'changed');
console.log(element.getAttribute('testarg'));
</script>
</body>
</html>
Your script should be,
var element = document.getElementById("mydiv");
var argstring = element.getAttribute("testarg");
Alternatively, you can use data attributes which is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM
So, your code will be like,
<div id="mydiv" data-testarg="teststring"></div>
<script>
var element = document.getElementById("mydiv");
var argstring = article.dataset.testarg;
</script>
var element = document.getElementById("mydiv");
var argstring = element.getAttribute('testarg');
console.log(argstring );
<div id="mydiv" testarg="teststring"></div>

Using web page address to create src for image on page

e.g. I have a file named: /SW1A2AA.htm
In the HTML I need to show the following image with the source for the image to include the filename (without the extension). I.e.:
<img src= "https://maps.googleapis.com/maps/api/staticmap?center=sw1a2aa&zoom=18&size=640x480">
Obviously if I need to do this for lots of pages, it would be easier if there was a way to amend the search string to depend on the filename (without the extension).
Please tell me there is a simple way to produce that result!
Thanks
Here is my solution for your example (SW1A2AA.htm). Empty src attribute is not valid, so we use //:00 - you can read more about this solution here.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<img id="map" src="//:0">
<script>
// grab the URL. I'm working locally so in my case it is /C:/Users/myLogin/Desktop/SW1A2AA.htm
var pageURL = window.location.pathname;
// find the last position of the "/"
var fileNamePosition = pageURL.lastIndexOf("/");
// take file name and delete last 4 characters (SW1A2AA.htm -> SW1A2AA)
var fileName = pageURL.slice(fileNamePosition+1,-4);
// create src
var mapSrc = "https://maps.googleapis.com/maps/api/staticmap?center=" + fileName + "&zoom=18&size=640x480";
// update map src attribute
var map = document.getElementById("map");
map.setAttribute("src", mapSrc);
</script>
</body>
</html>

How to access controls which are placed in iframe

I have a page a.aspx, which has an iframe whose source is ‘controlsPage.aspx’
Now referring a websource control object I am trying to find controls of ‘controlsPage.aspx’ , but the controls are not traceable.
Our Code:
wbSource.Navigate("localhost:12122//a.aspx")
Dim frameCollection As HtmlElementCollection = wbSource.Document.Window.Frames("ChildFrame").Document.GetElementsByTagName("Span")
Here we are getting count of frameCollection as 0
Main Page -> a.aspx
<html>
<body>
<iFrame id = “ChildFrame” src = “controlsPage.aspx”>
</iFrame>
</body>
</html>
Frame Page  controlsPage.aspx
<html>
<body>
<asp:label Text=”Source Page”/>
</body>
</html>
You can't do that. IFrame runs and independent page. You should parse that page at the backend.
<html>
<body>
<iFrame id = “ChildFrame” src = “controlsPage.aspx”>
</iFrame>
</body>
</html>
<html>
<body>
<asp:label Text=”Source Page” id="frame_text" />
</body>
</html>
Javascript code (use the below code in the main page) :
var iframe = document.getElementById('ChildFrame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var input = innerDoc.getElementById('frame_text');