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
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.
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.
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>
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>
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');