We Keep Coding

web page redirect javascript

I dynamically create a link to a. 'mywebsite' is a variable. Everything works but the mywebsite page replaces that of the code. I want to open mywebsite in another page.
May I have a help to solve the problem ?
var mylink = document.createElement("a");
var textForButton = document.createTextNode("More details");
mylink.appendChild(textForButton);
mylink.setAttribute("href", mywebsite);
document.body.appendChild(mylink);

You should set the linke target as this:
mylink.setAttribute("target", '_blank');
Your code my be something like this
<script>
window.onload = function () {
let mywebsite = "http://www.google.com";
var mylink = document.createElement("a");
var textForButton = document.createTextNode("More details");
mylink.appendChild(textForButton);
mylink.setAttribute("href", mywebsite);
mylink.setAttribute("target", '_blank');
document.body.appendChild(mylink);
};
</script>

You can set target=_blank attribute to do this.
mylink.setAttribute("target", "_blank");
So that once you click on the link that you have generated it opens in new tab.

How to pass url params to React app that's inside a html iframe

I have a React.js app and it displays inside a html iframe. How would I pass the URL params queries inside so my React app can access them. I tried to research online but couldn't find a solution for React. See code below and the solutions I tried. I get error message like TypeError: iframe is null. etc..
URL
http://website.com?param1=myname&param1=lastname
HTML iFrame
<iframe id="myIframe" src="http://localhost:3000/myReactApp" frameborder="0">
React.JS => index.js
My first try
var loc = window.location.toString(),
params = loc.split('?')[1],
iframe = document.getElementById('myIframe');
iframe.src = iframe.src + '?' + params;​​​​​​​​​​​​​​​​
console.log(iframe.src);
My second try in React.JS app
(function() {
var frameBaseSRC = document.getElementById("myIframe").src;
var frameQueryString = document.location.href.split("iFrameQuery=")[1];
if (frameQueryString != undefined) {
document.getElementById("myIframe").src = frameBaseSRC + "?q=" + frameQueryString;
}
})();

I got it working! Using code below.
I got the code from here
How to pass parameters through iframe from parent html?
let getParamValue = function(paramName)
{
var url = window.location.search.substring(1); //get rid of "?" in querystring
var qArray = url.split('&'); //get key-value pairs
for (var i = 0; i < qArray.length; i++)
{
var pArr = qArray[i].split('='); //split key and value
if (pArr[0] === paramName)
console.log(pArr[1]);
return pArr[1]; //return value
}
}
getParamValue('param1');

In this example the iframe and parent document are in separate domains so the URL would not be accessible.
If they iframe and parent document are hosted in same URL you should be able to do window.parent.location

window.location.ancestorOrigins
does gives the ancestors of the component. If a react component or page is inserted in an iframe where the webpage host(page in iframe) and the browser link(main host), this returns a lists of hostnames by which the iframe page is being rendered.

Parent window domain prepended to Iframe src page

I'm inserting an iframe using javascript in the following way:
var s ="<p><iframe name="searchf" src="http://www.google.com" frameborder="0" width="100%" height="350"></iframe></p>";
var para = document.createElement("div");
para.innerHTML = s;
var element = document.getElementById("some_div_id");
var child = document.getElementById("some_fieldset_id");
element.insertBefore(para,child);
Let's say the parent window domain is http://www.parentwindowdomain.com/example1. The problem is that the iframe src page is somehow interpreted in such a way that the parent window domain name is prepended to the specified src domain. For example, the resulting iframe src page address would turn out to erroneously be http://www.parentwindowdomain.com/example1/"http://www.google.com"
Is there a way to override this so that, in this case, the iframe src page would be http://www.google.com ?

Can you try this one, i think it is tidier.
http://jsfiddle.net/qpkp5sb2/
var s = document.createElement("iframe");
s.setAttribute("name", "searchf");
s.setAttribute("src", "http://www.example.com");
s.setAttribute("frameborder", "0");
s.setAttribute("width", "100%");
s.setAttribute("height", "350");
var pp = document.createElement("p");
pp.appendChild(s);
var para = document.createElement("div");
para.appendChild(pp);
var element = document.getElementById("some_div_id");
var child = document.getElementById("some_fieldset_id");
element.insertBefore(para,child);
console.log(s);

How to add event to the body of a dynamically created iframe in jQuery?

I've tried:
$(document).on("event", window.iframe_name.doument.getElementsByTagName["body"][0], function(){
//code
});
but it doesn't seem to work.

First you have to wait for the iFrame to load.
$(function(){
$('#iFrame').load(function(){
//then set up some access points
var frame = document.getElementById('iFrame'); // referance to the iframe
var frameWindow = frame.contentWindow; // referance the iframes window
var contents = $(this).contents(); // contents of the iframe
frameWindow.$('body').on(//your code here)
})
})

window.open: is it possible open a new window with modify its DOM

I want open a new window：
var my = window.open('iframe.html', '_blank' ,"height=600, width=600");
but just when open it, I want modify its DOM, I have tried:
var div = my.document.createElement("div");
div.innerHTML = "Hello!";
my.document.body.appendChild( div );
or:
var div = $('<div>Hello World</div>');
$(my).contents().find('body').append(div);
Both of them doesn't work;
So is it possible modify my iframe DOM when I open it?

It is possible to access and modify the iframe DOM only before the child window is loaded.
var my = window.open('iframe.html', '_blank' ,"height=600, width=600");
my.onload = function () {
var div = my.document.createElement("div");
div.innerHTML = "Hello!";
my.document.body.appendChild( div );
};
Also, make sure that the parent window is not closed before the child window is loaded.