target="_blank" with a custom javascript-generated html page

Question

I have a code highlight block for which I would like to have an option where you click on a button and it opens up a new HTML page where it displays the "raw" content of the highlight. I have the code ready in raw form and the link prepared with target="_blank", but I can't seem to get it to open up a new page.

This is what my HTML looks like:

<a href="#" target="_blank">Click to view HTML</a>

And this is my javascript

//when clicked
link.href = 'javascript:document.write("...");';
//the click event should continue as normal

This should open up a new page with "..." as the content, but it doesn't work (it just opens up the existing page).

Is there anyway to do this without using popups?

If doing this server-side is a possibility, I would go with that and the target="_blank" option. — alf
– alf, Commented Aug 22, 2012 at 15:51

epascarello · Accepted Answer · 2012-08-22 15:52:45Z

6

function writeToWindow(content) {
    var newWin = window.open('','newWin','width=300,height=200');
    newWin.document.open();
    newWin.document.writeln("<html><head><title>Console</title></head><body>" + content + "</body></html>");
    newWin.document.close();
}

call it

onclick="writeToWindow('text to display');"

answered Aug 22, 2012 at 15:52

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

matsko Over a year ago

If you leave out the dimensions and just put window.open('') then it will open it as a new page/tab.

kothvandir · Accepted Answer · 2012-08-22 15:56:08Z

1

Do you have to use a new window? I think is easier to use a layer.

<div id="toggleText" style="border:solid black 1px; display:none;height:100px;width:100px">
<span id="displayText"></span>
</div>


<script language="javascript"> 
func tion toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
} 
    </script>

answered Aug 22, 2012 at 15:56

kothvandir

2,1612 gold badges19 silver badges34 bronze badges

Collectives™ on Stack Overflow

target="_blank" with a custom javascript-generated html page

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related